(By the way, this isn’t important as I get your point, but I think these snippets are a bit different. Isn’t the first one showing one or the other message, while the second one always showing “Hi, there” and only optionally showing “AAHHH”?)
The only difference is that one had <h1> and the other is a <p> instead. Plus a <div> wrapped around it but don’t worry it’s just a pseudo code to get my point across. So both examples are going to show the second argument hi, there! because of the state, is false to begin with.
Listen mate sometimes you have to think outside the box and being open-minded. I mean when jsx first came out a lot people didn’t like either, and also like the rewrite you are referring to. I hate to break this to you but it was not much of rewrite either. It was putting stuff in a single line instead of multi lines.
This is the line that keeps my brain processing too,
yellAtPerson ? <h1>AAAHH</h1> : <span>hi, there!</span>
Something nice about having rw-if
<h1 rw-if={yellAtPerson}>AAAHH</h1>
<span>hi, there!</span>
But the argument is always
“I’d rather do it in just JavaScript.” You know?”
Another solution would be using reusable components pattern like,
<rw-If condition={user.role === 'admin'}>
<Then>
<h1>You can delete users </h1>
</Then>
</rw-If>
<span>hi, there!</span>
https://morello.dev/conditional-rendering-in-react
This only for if but I would still need stuff like,
<rw-For />
<rw-Else />
<rw-Elseif />
<rw-Class />
<rw-Show />