javascript

Render item condition based React

We use the if else condition statement to implement something condition-based. In React you can render HTML components based on different condition using below code.

function template() {
    const renderItem = true;

    return <div>
        {renderItem &&
            <div>This will render if renderItem is true</div>
        }
    </div>
}

You can render items and HTML in React based on condition. In the code snippet, we are rendering div id 'renderItem' variable is true. It will not render on the page if we set this variable false.

Multiple conditions

function template() {
    const child = 10;
    const message = "hello";

    return <div>
        {child > 5 && message === "hello" &&
            <div>This will render if renderItem is true</div>
        }
    </div>
}

The above code will render the <div> element if child is greater than 5 and message is equals to hello.

Was this helpful?