Chrome Extension

Render item condition based React

function template() {
    const renderItem = true;

    return <div>
        {renderItem &&
            <div>This will render if renderItem is true</div>
        }
    </div>
}
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

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?
0 Comments