The reason OP's complaint is a bit silly is because JSX is just JavaScript and there's no need to be doing everything in a single JSX expression in the first place. That would be bad code just like any other situation. Do what you'd do in normal JavaScript code: use multiple statements and put the conditional elsewhere. Given complicated conditionals, an experienced React dev would do:

    render() {
      let foo
      if (someCondition) {
        foo = <ChildFoo/>
      }
      return (
        <Bar>
          {foo}
        </Bar>
      )
    }

or:

    renderChildFoo() {
      if (someCondition) {
        return <Foo/>
      }
    }
    
    render() {
      return (
        <Bar>
          {this.renderChildFoo()}
        </Bar>
      )
    }

or if possible, always render <Foo/> and conditionally return null in Foo's own render() method.