You can prevent component from rendering by returning null based on specific condition. This way it can conditionally render component.
1 2 3 4 5 6 7 8 9 10 11 | function Greeting(props) { if (!props.loggedIn) { return null; } return ( <div className="greeting"> welcome, {props.name} </div> ); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | class User extends React.Component { constructor(props) { super(props); this.state = {loggedIn: false, name: 'John'}; } render() { return ( <div> //Prevent component render if it is not loggedIn <Greeting loggedIn={this.state.loggedIn} /> <UserDetails name={this.state.name}> </div> ); } |
In the above example, the greeting component skips its rendering section by applying condition and returning null value.
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.
