Embedding method if expressions inside JSX code?

Question

I assume that the material that is included in the reaction tag should be a reaction tag or string; function returning a tag or string; a set of tags or lines or functions that return them.

So the statement ifhere is invalid:

return <div> 
        if(something){
           <ProjectType typ={this.state.type} onChange={this.changeType}/>
        }
        And the choice is {type[this.state.type]}
      </div>;

Thus, the obvious way is to move this expression ifinto a function maybe_renderthat returns a tag when the condition is met.

return <div> 
        maybe_render(something, this.state.type, this.changeType)
        And the choice is {type[this.state.type]}
      </div>;

The problem is that some fragments will have many function calls that have very little logic. Instead of a 5-line fragment, we can have a 5-line fragment with many calls to extremely small functions.

What is a good way to embed expressions ifin JSX code?

Answer 1

, :

return (
    <div>
        {doSomething ? something : null}
        Something else
    </div>
);