DEV Community

Cover image for The Ternary operator with React!
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

The Ternary operator with React!

Hey fellow creators,

The Ternary operator is a great way to do some conditional rendering with React! Let's learn how to do that.

If you prefer to watch the video version, it's right here :

1. What is the Ternary operator?

Let's say we have this code :

import "./App.css";

function App() {

    const toggle = 1;

    return (
        <div className="container">

        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

We can execute a console.log to see how a ternary operator works.

console.log(toggle ? "true" : "false");
Enter fullscreen mode Exit fullscreen mode

Then in the console you will have "true", since toggle is not null or undefined.
Great, so let's now use the power of the ternary operator combined with React !

2. Let's implement some state

Let's import the hook useState from React:

import {useState} from 'React'
Enter fullscreen mode Exit fullscreen mode

and create the state:

function App() {

    const [toggle, setToggle] = useState(false);

    return (
        <div className="container">

        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

We'll start the state with false, and then add a button to trigger the change in the state :

return (
        <div className="container">
            <button>Toggle</button>
        </div>
    )
Enter fullscreen mode Exit fullscreen mode

Now let's add the function which will reverse the value of toggle every time you click on the button:

const toggleFunc = () => {
    setToggle(!toggle)
}
Enter fullscreen mode Exit fullscreen mode

Obviously you now need to add that function to the button:

<button onClick={toggleFunc}>Toggle</button>
Enter fullscreen mode Exit fullscreen mode

In order to see the change in state, you can add a console.log beneath the toggleFunc():

const toggleFunc = () => {
    setToggle(!toggle)
}
console.log("Update")
Enter fullscreen mode Exit fullscreen mode

Now you can see that every time you click on the button, it re-enders your component and changes the value from false to true!

3. Use the Ternary operator to go from one classname to another!

Here's a recap of the code you have for now:

import {useState} from 'React'

import "./App.css";

function App() {

    const [toggle, setToggle] = useState(false);

    const toggleFunc = () => {
    setToggle(!toggle)
    }
    console.log("Update")

    return (
        <div className="container">
            <button onClick={toggleFunc}>Toggle</button>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

Now, modify the className of the div that contains the button with a ternary operator:

<div className={toggle ? "container salmon" : "container"}>
    <button onClick={toggleFunc}>Toggle</button>
</div>
Enter fullscreen mode Exit fullscreen mode

If the toggle is false, then the background of the container will be dark, if it's true then it'll turn salmon.
It's pretty simple, but is actually really useful, especially if you want to use animations, interactions or even to show or hide some content!

4. You can also render some CSS!

You can also modify the height of your div for example:

<div 
    className={toggle ? "container salmon" : "container"}
    style={{height: toggle ? "400px" : "200px"}}
>
    <button onClick={toggleFunc}>Toggle</button>
</div>
Enter fullscreen mode Exit fullscreen mode

5. The same goes for some text.

Let's add a const to toggle the text of a title that you'll then add in the div:

const txt = toggle ? "Lorem" : "Ipsum"
Enter fullscreen mode Exit fullscreen mode
<div 
    className={toggle ? "container salmon" : "container"}
    style={{height: toggle ? "400px" : "200px"}}
>
    <button onClick={toggleFunc}>Toggle</button>
    <h1>{txt}</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

As before, you'll see that the text changes!

You can now see how useful the Ternary operator can be with React!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

Have fun looking at my other tutorials!

Enzo.

Top comments (0)