JavaScript do expression: if statement without else

Question

I have a question about the proposed JavaScript do expression construct. There are many examples that show how it can be used to return a value from a conditional statement that has both if and else. Also valid for if with else if and else.

What about a conditional that has just an if clause but no else if or else? Is this valid usage of the do expression?

My use case is for conditionally displaying content in a React component. I would like to write JSX code like so, but I am not sure if it is valid:

export default function myComponent(props) {
  return (
    <div>
      {do {
        if (true) {
          <p>If statement is true</p>
        }
      }}
      <p>I am always rendered</p>
    </div>
  );
}

I also asked the question in this gist.

Answer 1

Not sure about do, also as mentioned by @Felix Kling

do expression is a stage 1 proposal, not part of ES2016 (ES7).

---

You can write it like this using ternary operator, and return null if condition fails:

export default function myComponent(props) {
    return (
        <div>
            {
                true?
                    <p>If statement is true</p>
                :null
            }
            <p>I am always rendered</p>
        </div>
    );
}

Or Use && Operator:

export default function myComponent(props) {
    return (
        <div>
            {
                true && <p>If statement is true</p>
            }
            <p>I am always rendered</p>
        </div>
    );
}

Check the DOC for more details about Conditional Rendering.

Answer 2

Why not simply do this ? Using the Ternary operator

export default function myComponent(props) {
  return (
    <div>
      { true ? <p>If statement is true</p> : null }
      <p>I am always rendered</p>
    </div>
  );
}

Answer 3

Here is what Babel does:

Input:

<p>
  {do {
    if (true) {
      <a/>
    }
  }}
</p>

Output:

React.createElement(
  "p",
  null,
  true ? React.createElement("a", null) : void 0
);

This makes sense to me. The return value in the implied else would be undefined.