Render item condition based React

javascript Share on :

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.

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets