How to prevent component from rendering?

You can prevent component from rendering by returning null based on specific condition. This way it can conditionally render component.

function Greeting(props) {
if (!props.loggedIn) {
return null;
}

return <div className="greeting">welcome, {props.name}</div>;
}

class User extends React.Component {
constructor(props) {
super(props);
this.state = {loggedIn: false, name: 'John'};
}

render() {
return (
//Prevent component render if it is not loggedIn
<Greeting loggedIn={this.state.loggedIn} />
<UserDetails name={this.state.name}>
);
}

In the above example, the greeting component skips its rendering section by applying condition and returning null value.