Use do { } makes React render() method more readable

do notation.js

// FP languages permit to evaluate if/else expressions as values.
// In many cases it permits to avoid using mutable variables (var/let), multiple returns, or nested ternary operators

// This is the do { } notation (stage 0), that permits to write the following right now with Babel.

const Users = ({users}) =>   (
  <div>
    {users.map(user =>
      <UserCard key={user.id} user={user}/>
    )}
  </div>
)  

const UserList = ({users}) => do {
  if (!users) <div>Loading</div>
  else if (!users.length) <div>Empty</div>
  else <Users users={users}/>
}

I'm not sure this is the best example. @pitermarx showed a way to do this without need of that new feature.
However, I do think it's pretty interesting for any time you want to calculate something that requires intermediary computation and you don't want to pollute the outside scope.

It's something not far from an auto-called function but without need to use return.

I also like the implicit return value. This is something we didn't have in JavaScript but which exists in other languages like scala (returned value of a block, is evaluated from the last expression).

I was a bit concerned by a potential syntax ambiguity. like imagine if you use while(test) on the next line. But actually, that new do{} is an expression that only is syntax valid if you use its value. if you don't use the returned value, THEN it's the do{}while(test) loop. so there is no ambiguity (as far I as understood. please discuss if i'm wrong)

Also one question: is there a way this can work with switch?! (instead of if)
I don't seem to be able to do this.

@gre I agree with you and often use code-blocks in scala to limit the scope of unnecessary variables.

I'm not sure it can work with switch because in switch it's not like pattern matching, and you can enter on multiple "branches" if you don't use break/return. Inside do {}, if you don't use return on switch it... does not return anything. If you put a return it says you are not in a function context so can't return.

I guess what you want is this in a more idiomatic way? I'd also love that

const CodeBlockResult = (() => {
  const someEnum = "case1";
  switch (someEnum) {
    case "case1": return "val1";
    case "case2": return "val2"
    case "case3": return "val3"
    default: return "val4"
  }
})();

Isn't it annoying to have to use let reassignment with switch, or this weird function syntax ? :)

can't wait pattern matching :D