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>
    )
}

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

console.log(toggle ? "true" : "false");

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'

and create the state:

function App() {

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

    return (
        <div className="container">

        </div>
    )
}

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>
    )

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

const toggleFunc = () => {
    setToggle(!toggle)
}

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

<button onClick={toggleFunc}>Toggle</button>

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

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

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>
    )
}

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>

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>

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"

<div 
    className={toggle ? "container salmon" : "container"}
    style={{height: toggle ? "400px" : "200px"}}
>
    <button onClick={toggleFunc}>Toggle</button>
    <h1>{txt}</h1>
</div>