GoConqr has a new look! Let us know what you think.

16.a React.js

Module 1 · Media Course's Objectives
Module 2 · Media What is React?
Module 3 · Media Create React App
Module 4 · Media Import Install React
Module 5 · Media Create a react component
Module 6 · Media Render HTML or JSX
Module 7 · Media Rendering component to DOM
Module 8 · Media Rendering multiple elements
Module 9 · Media Render a single outer element
Module 10 · Media React fragments
Module 11 · Media JavaScript Injection
Module 12 · Media Conditional rendering You are here
Module 13 · Media Dynamic rendering
Module 14 · Media Components' Props
Module 15 · Media Props.children
Module 16 · Media Prop Types
Module 17 · Media Using Prop Types
Module 18 · Media React events
Module 19 · Media The bind method
Module 20 · Media Refs
Module 21 · Media Manage state in React
Module 22 · Media Decompose
Module 23 · Flowchart React siblings components
Module 24 · Media Parent component's structure
Module 25 · Media Change state functionality
Module 26 · Media Changing parent's state through Form
Module 27 · Media Depict parent's state
Module 28 · Media Create a react todo app

Close the course

Module 12 of 28 · Media

Conditional rendering

Kostas Diakogiannis

Conditional rendering

Sometimes we want to evaluate a boolean value, and based upon it to decide if an element (or even a whole component) will be rendered. There are many ways to do that: Ternary operator, if else statements etc. In this case we will use the && operator that React provides in order to make decisions.

Syntax has to be inside { } as we saw any time we need to evaluate a JS expression inside JSX.

In the case above, the paragraph will be in the DOM only in case showParagraph evaluates to true (has a truthy value).

Conditional rendering

16.a React.js

Instructions

Feedback

What do you think of the new look?