Ajit Ajit - 3 months ago 10
React JSX Question

Is there a better way to use conditionals inside jsx?

I've been learning React for the past few weeks and one thing that I don't like is that I have to use ternary operator for if else inside the render function.

Something like:

function render() {
return (
{x==="Let's go" ? <Go /> : <Hold on />}
)
}


Is there a way I can use a traditional if-else or switch for that matter with jsx syntax in React?

Answer

I utilize a few approaches to clean up the render method of more complex components.

1) Use a variable. Before you are actually in the JSX portion (the return) you can use the flexibility of raw JS to build variables. To take your example...

function render() {
    let body;
    if (x === "Let's go") {
        body = <Go />
    } else {
        body = <Hold on />;
    }
    return (
        <div>
            {body}
        </div>
    );
}

Note that the top level needs to be wrapped, just put an extra div in there.

2) Use a function. This example is probably a little too simplistic but you'll get the idea..

renderBody() {
    let body;
    if (x === "Let's go") {
        body = <Go />
    } else {
        body = <Hold on />;
    }
    return (
        {body}
    )
}

render() {
    return (
        <div>
            {renderBody()}
        </div>
    )
}

3) Use an array (really a subset of #1) but oftentimes I find scenarios where sometimes I need to return 1 element but other times I need to return a variable number of elements. I will create an array at the top of the function and then push/unshift elements onto the array. Note that any time that you are building an array you must provide a key for each element so that React can update it properly.

let els = [
    <div key="always">Always here</div>
];
if (foo) {
    els.push(<div key="ifFoo">Conditionally Here</div>)
}

And then you just use the {els} variable in your main JSX.

4) Return null when you don't want anything to render

Comments