Conditional Rendering
In React, we can create distinct components that encapsulate behavior we need. Then, we can render only some of them, depending on the state of the application. Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.
Loading video...
Conditional Rendering in React (in Hindi)
Concepts
1
Conditional Rendering in React (in Hindi)
Watch the full video to earn 3
Quizzes
1
What are the ways you can conditionally render a component?
Question 1 of 5
1 per question
2
What will be the output of the following code?
const isLoggedIn = true; isLoggedIn ? <p>Hello</p> : <p>Please login</p>;
Question 1 of 5
1 per question
3
Will the following alert be popped?
(8 < 4) && alert('!!!! Hello Dev11 !!!!')
Question 1 of 5
1 per question
4
React conditional rendering is similar to javascript conditional rendering?
Question 1 of 5
1 per question
5
Is the following code valid?
{(function() { if (isLoggedIn) { return <button>Logout</button>; } else { return <button>Login</button>; } })()}
Question 1 of 5
1 per question