Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

Conditional Rendering

2 lessonsAbout 12 minutesIntermediate

This part of the React Tutorial runs from Conditional Rendering through to Showing, Hiding and Losing State. There are 2 lessons here, and working through them takes about 12 minutes at a steady pace.

It follows on from Handling Events, so finish that first if you have not already — the examples below assume you are comfortable with it.

Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.

  1. 1Conditional RenderingShow and hide React UI with ternaries, && and early returns. Learn which technique fits which situation and how to keep JSX readable.
  2. 2Showing, Hiding and Losing StateConditionally removing a React component destroys its state. Learn the difference between not rendering and hiding with CSS, and when each is right.
All of React TutorialNext: Lists and Keys