DEV Community

Discussion on: How I designed an alternative to JSX

Collapse
 
johncarroll profile image
John Carroll • Edited

As we want to read it from top to bottom and avoid using variables, we need to heavily rely on ternary operators and logical expressions.

I can see why, with these (arbitrary?) requirements, JSX might look problematic. But I don't know why you're trying to force the use of ternary operators. Personally, I find the following formatting to be the most easy to read. And it doesn't require learning anything new.

({ 
  firstProgrammer,
  secondProgrammer,
  someCondition
}) => {
  let innerHtml;

  if (someCondition) {
    if (firstProgrammer && secondProgrammer) {
      innerHtml = <p><bold>{firstProgrammer}</bold>, you're going to do pair-programming with {secondProgrammer}.</p>;
    } else if (firstProgrammer && !secondProgrammer) {
      innerHtml = <p><bold>{firstProgrammer}</bold>, you'll code this task by yourself.</p>
    } else {
      innerHtml = <p>Hey man! Can you tell us your name before we give you job to do?</p>
    }
  }

  return <div>{innerHtml}</div>
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
chrisczopp profile image
chris-czopp

yeah, I'm not going to argue here. In this case declaring local var makes more sense than ternary operators.