Oftentimes, we want to conditionally display items in a React component.
In this article, we’ll look at how to conditionally display items in a React component.
Conditionally Displaying Items in a React Component
We can conditionally display items in a React component in various ways.
One way is to use a ternary expression.
For instance, we can write:
render() {
return (
this.props.showMe ? <button type="submit">show me</button> : null
);
}
The first item is shown if showMe is true and null is rendered otherwise.
We can also use the && operator.
For instance, we can write;
`{`showMe `&&` <button type="submit">show me</button>`}`
Is showMe is true then the button is rendered since the expression will be evaluated.
Conclusion
We can conditionally display items in a React component in various ways.
