The Ternary operator with React!
Tags: html, css, react, tutorial
Published: 2021-11-18 11:56:10

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 :

{%youtube kAg66VPdsCc%}

##1. What is the Ternary operator?

Let's say we have this code :

```react
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.

```react
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:
```react
import {useState} from 'React'
``` 

and create the state:
```react
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 :

```react
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:

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

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

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

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

```react
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:

```react
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:

```react
<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:

```react
<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*:

```react
const txt = toggle ? "Lorem" : "Ipsum"
```

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

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.