by Sai gowtham

Conditional rendering in React

Conditional rendering in React

In this tutorial, we are going to learn about what is conditional rendering and how to implement it in react.

What is conditional rendering?

Conditional rendering means only display the elements in the UI, if a particular condition is true otherwise hide the elements.

IF/ELSE conditionals

Let’s look into JavaScript if-else conditionals.

let num = 2

if(num === 2){
    console.log('the given number is 2')
}else{
    console.log('the give number is not 2')
}

In the above code, we have initialized a variable with 2 then we used if else conditional to log the message based on the provided number.

Let’s implement the if/else conditional in react.js.

function App(props){

   if(props.num === 2){
       return <p>The given number is 2</p>
   }else{
       return <p>The given number is not  2</p>
   }

}

<App  num = {2} />

In the App component we passed num prop to 2 so that we can only render the p element present inside the if condition.

Ternary operator

We can make our App component code shorter by using the ternary operator.

function App(props){

    {props.num === 2 ?  <p>The given number is 2</p> :
     <p>The given number is not 2</p> }

}

<App  num = {2} />

Here we wrapped our code with curly braces because in react jsx we need to use curly braces for the JavaScript expressions.

Logical &&(and) operator

In JavaScript, the Logical && operator is used to evaluates the expression if the given condition is true.

true && expression // expression

false && expression // false

Using logical and (&&) operator in react.

function Search(props){

   return (
       <div>
          <h1>Search</h1>
         <button>Search</button>

         {props.searchResults > 0 &&  <ul>search results</ul>}

       </div>
   )

}

In the Search component we used Logical &&(and) operator to render the ul element only if props.results is greater than 0.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course