From React Class component to Functional component with hooks

React and Conditional rendering

December 5, 2023 · 7 minutes

What have a toggle element and a loader in common? The answer is… different renders depending on the on/off or loggedIn/loggedOut states! Sometimes we need to render different components or HTML elements depending on condition…

In this article, we will discover the three ways to control the conditional rendering. Then we will apply them into a class component and a functional component when Toggling a React Element. as seen in the third episode.

 

Summary

In React there are three different ways to control the rendering with JavaScript conditionals: the  if/else traditional one and two shortcuts.

The Traditional if/else statements

A JSX expression can be conditionally returned with an if statement outside the return statement. So, each statement contains a return().

render() {
  if (condition) {
    return(
      <div>Component JSX rendering code when condition is true</div>
    );
  } else {
    return(
      <div>Component JSX rendering code when condition is not true</div>
    );
  }
}

Find an example in both class component and functional component below.

Important: Because how JSX is compiled, the if/else statements can not be inserted directly into JSX code. They cannot be used  in the return statement! Use shortcuts as the logical operator && or the ternary expression to insert condition into JSX code.

The conditional shortcuts

Contrary to the traditional if/else statements, the shortcuts can be used inside the JSX code. Let’s have a look at the logical operator && et the ternary operator structures.

Inline if with logical operator &&

This shortcut has two parts: condition && expressionIfTrue

In JSX, {cond && <A />} means “if cond, render <A />, otherwise nothing”.

This shortcut can be used inside the return statement (within JSX code).

Find an example in both class component and functional component below.

Inline if with ternary operator

The ternary operator is not as robust as the if/else statement but it is very popular as being an excellent alternative to implement conditional logic within JSX.

A Ternary Operator has three parts: condition ? expressionIfTrue : expressionIfFalse.

In JSX, {cond ? <A /> : <B />} means “if cond, render <A />, otherwise <B />”.

Remarks:

  • Several ternary expressions may be combined together!
  • If there is no third part, replace expressionIfFalse by null.
  • You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.

Find an example in both class component and functional component below.

The shortcuts are common, but you don’t have to use them if you prefer plain if.

Conditional Rendering examples

Do you remember the third episode entitled “How to toggle an element in a React Component?” We had to use a conditional rendering! There are many ways to write the code depending on whether the component is a class component or a functional component and depending on the chosen conditional solution! Let’s try them all below!

Toggle element in a class component

Find the extracts of code below. Remark: If you do not remember how to toggle an element with React in a Class Component refer to the third episode.

Toggle element with if/else statement in a class component

  • The condition is written in the render method.
  • Each statement contains its own return().
   render() {
      if (this.state.visibility) {
        return (
          <div>
            <button onClick = {this.toggleVisibility}>Hide</button>
            <h1>Now you see me!</h1>
          </div>
        );
      } else {
        return (
          <div>
            <button onClick = {this.toggleVisibility}>Show</button>
          </div>
        );
      }
    }

Toggle button with ternary operator in a class component

  • The condition is directly written in the return statement of the render method.
  • So, there is only one return statement.
  • Each expression of the ternary operator contains its own render: the heading is displayed only if the condition is true, the text button is different depending on whether the condition is true or not.
  render() {
        return (
            <div>
            {this.state.visibility ?
            <div>
                <button onClick = {this.toggleVisibility}>Hide</button>
                <h1>Now you see me!</h1>
            </div>
            : <button onClick = {this.toggleVisibility}>Show</button> }
            </div>
        )
    }

Toggle element with logical operator && in a class component

  • The condition is directly written in the return statement of the render method.
  • So, there is only one return statement.
  • The logical operator has to be used twice: once when the condition is true, once when it’s false.
   render() {
        return (
            <div>
            {this.state.visibility == true &&
                <div>
                <button onClick = {this.toggleVisibility}>Hide</button>
                <h1>Now you see me!</h1>
                </div>
            }
            {this.state.visibility == false &&
                <button onClick = {this.toggleVisibility}>Show</button>
            }
            </div>
        )
    };

Open this pen to play with the code and try to code the three solutions on your own.

Toggle element in a functional component

Find the extracts of code below. Remark: If you do not remember how to toggle an element with React in a Functional Component refer to the third episode.

Toggle element with if/else statement in a functional component

  • The condition is directly written in the function component (there is no render method in a functional component).
  • Each statement contains its own return().
  • Remark: the <div> is not needed in this example as there is only one HTML element. However I have included it to remind it will be necessary if there are more elements…
if (isVisible) {
    return (
      <div>
        <button onClick={() => setIsVisible(false)}>Hide</button>
        <h1>Now you see me!</h1>
      </div>
    )
  } else {
    return (
      <div>
        <button onClick={() => setIsVisible(true)}>Show</button>
      </div>
    )
  }

Toggle button with ternary operator in a functional component

  • The condition is directly written in the return statement (there is no render method in a functional component).
  • So, there is only one return statement.
  • Each expression of the ternary operator contains its own render: the heading is displayed only if the condition is true, the text button is different depending on whether the condition is true or not.
    return isVisible ? (
        <div>
            <button onClick={() => setIsVisible(false)}>Hide</button>
            <h1>Now you see me!</h1>
        </div>
    ) : (
        <div>
            <button onClick={() => setIsVisible(true)}>Show</button>
        </div>
    )

Toggle element with logical operator && in a functional component

  • The condition is directly written in the wrapping <div> element of the return statement (there is no render method in a functional component).
  • So, there is only one return statement.
  • The logical operator has to be used twice: once when the condition is true, once when it’s false.
return (
    <div>
      { isVisible == true &&
        <div>
          <button onClick={() => setIsVisible(false)}>Hide</button>
          <h1>Now you see me!</h1>
        </div>
      }
      { isVisible == false &&
        <button onClick={() => setIsVisible(true)}>Show</button>
      }
    </div>
  )

Open this pen to play with the code and try to code the three solutions on your own.

In conclusion

In this article, we have discovered the different ways to condition the rendering: if/else statements, ternary operator and logical operator &&. Then we have tested these solutions in both class component and functional component.

 

Need to train?

  1. Try to pass these freeCodeCampChallenges in class components:
  2. Then, try to re-write these challenges in functional components [a solution to the third one in a pen].

 

In the next episode, we will try to Render Conditionally from Props! Are you ready?

< Previous Post
Next Post >
Haut de page