Basic Conditional Rendering In React Using the Logical && Operator

From Medium

Sometimes rendering code in React can get a bit cumbersome. Often times we only want to render part of our code depending on the state and so this basic tutorial is set up to illustrate how you can easily display part of your code using an inline conditional statement. Assuming you can get some barebones React code running using something like create-react-app, below is an example of some code that will conditionally display based on state using a button on the page to toggle state:

From Giphy

import React, { Component } from 'react';
class App extends Component {
  state = {
    test: true,
  }
  handleClick = () => {
    this.setState({
      test: !this.state.test
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        { this.state.test && <p>Conditional Rendering Is Cool!</p> }
      </div>
    );
  }
}
export default App;

Let’s start from the beginning.

First off we want to render some basic code on the page, so let’s start off with something like this:

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
        <button>Click Me</button>
        <p>Conditional Rendering Is Cool!</p>
      </div>
    );
  }
}
export default App;

If we run our react code using npm start or yarn start we should be able to see on the page a button that says ‘Click Me’ and a bit of text that says ‘Conditional Rendering is Cool!’.

While this is great, there’s not much going on. Our button doesn’t do anything and the text is always on the page. Before we talk about state, let’s start off by hiding the text using an inline conditional statement so we get an idea of what we’re trying to do:

import React, { Component } from 'react';
class App extends Component {
 render() {
    return (
      <div>
        <button>Click Me</button>
        { false && <p>Conditional Rendering Is Cool!</p> }
      </div>
    );
  }
}
export default App;

If we refresh our page, we should see that only the button is visible. That’s because now the code in between the curly braces gets evaluated before it’s returned. Because && operators need both conditions to be true, by making our first condition ‘false’, the condintional evaluates to false as a whole even though the second condition (the ‘p’ tag) is true. Since properly written HTML code evaluates to true, using inline conditionals are a great way to take advantage of displaying content on a page. If we were to change the ‘false’ to ‘true’, the content would display since both conditions would evaluate to true. Feel free to try this out on your own.

Now that we know that we can display/not display content using true and false in our conditional, hopefully you can see where we are going with this. Instead of hard-coding the words true or false, let’s tie our state to a true or false value and evaluate that instead:

import React, { Component } from 'react';
class App extends Component {
  state = {
    test: true,
  }
 render() {
    return (
      <div>
        <button>Click Me</button>
        { this.state.test && <p>Conditional Rendering Is Cool!</p> }
      </div>
    );
  }
}
export default App;

Now our line reading ‘Conditional Rendering is Cool!’ should be back on the page. No longer have we hard-coded a true or false value in our conditional, but instead we have tied our state to the conditional. Since we set an initial state called ‘test’ as a boolean value of true, our content displays. Now we just need a way to change states. If you’re anything like me you’ve probably been itching to have our button do something, so let’s go ahead and give it some functionality for our final step:

import React, { Component } from 'react';
class App extends Component {
  state = {
    test: true,
  }
  handleClick = () => {
    this.setState({
      test: !this.state.test
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        { this.state.test && <p>Conditional Rendering Is Cool!</p> }
      </div>
    );
  }
}
export default App;

Once again, this is the original code I provided. What we did was create an event listener using ‘onClick’ and had it call our handleClick function. Every time we press the button, the handleClick function sets the state to the opposite of what it was previously. By doing so we have effectively created a toggle button which switches our state between true and false and therefore conditionally renders our content based on state. Yay! Go ahead and press that button all you want to see our work in action.

If you can imagine, this is a simple way to hide or show content based on state. If we extrapolate a bit, this technique could have some practical uses like perhaps tying our state to whether a user is signed-in or not instead of to a button click. This way some content will only display on a page if a function is able to evaluate whether a user is signed-in.

While there are numerous other ways to handle this, when things aren’t too complex, inline conditional statements are a great tool to have in our toolbox. Using callback functions, or ternary operators are other options as well. For more reading on that check out some of the documentation on the React page.