Hands-On Full-Stack Web Development with GraphQL and React

Conditional rendering

One important ability of React is rendering components or data conditionally. We will use this intensively in the next main features that we are going to implement.

Generally, you can accomplish conditional rendering by using the curly brace syntax. An example of an if statement is as follows:

render() {  const { shouldRender } = this.state;   return (    <div className="conditional">      {(shouldRender === true) && (        <p>Successful conditional rendering!</p>      )}    </div>  )}

This code is the simplest example of conditional rendering. We have the shouldRender variable from the component state, and we use this as our condition. When the condition is true, the second part—which is our Successful conditional rendering! text—will also ...