Preventing Component from Rendering in React

Posted by Rohit Kumar | Updated on

In this example, I have shared Preventing Component from Rendering in React. In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return null instead of its render output.

In the example below, the is rendered depending on the value of the prop called warn. If the value of the prop is false, then the component does not render:

Returning null from a component’s render method does not affect the firing of the component’s lifecycle methods. For instance componentDidUpdate will still be called.

Reference:
https://reactjs.org/docs/conditional-rendering.html


If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers