# Conditional React: 3 Ways To Control Your Component Flow
%%[kempo]
If you've written any code, you've probably come across control flow.
But what is it?
Here's what [MDN says about control flow](https://developer.mozilla.org/en-US/docs/Glossary/Control_flow):
> The *control flow* is the order in which the computer executes statements in a script.
So control flow describes what parts of your code run and in what order. Cool...but that's not that interesting. It would be more valuable if we could *manipulate* the control flow and change your code's execution order.
Luckily most programming languages have built-in ways to do this.
While React isn't a programming language in its own right, it relies heavily on the fundamentals of JavaScript. Understanding how JavaScript deals with control flow will help you write flexible React components that change how they render.
There are 3 core ways to control how your components render.
## 1\. The if/else statement
The most common conditional is the basic [if/else statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else):
```typescript
function myFunc(name) {
if (name === 'thesshguy') {
return 'Cool';
}
return 'Not Cool';
}
```
An if/else statement lets you return *early* when some condition is met. This same principle can be used in your React components. You can return different JSX elements based on the value of a prop:
Notice how we return different JSX based on the `name` prop.
Try changing the names to see what happens.
## 2\. The ternary operator
If you've never seen a ternary operator before, it might look a little confusing at first.
The ternary operator takes three inputs and returns a single value. The three inputs are a **condition**, a **truthy value**, and a **falsy value**. **Truthy** and **falsy** just mean values that are considered `true` or `false` when converted to a `Boolean`.
All ternary operators follow the same format in JavaScript:
1. A condition followed by a `?`
2. An expression to execute if the condition is **truthy** followed by a `:`
3. An expression to execute if the condition is **falsy**
**Note:** If that's still not clear, you can use the handy acronym ***W.T.F.*** to help you remember: `what (cond) ? true : false`.
```typescript
function myFunc(name) {
/*
* W.T.F.
* 1. What: name === 'thesshguy'
* 2. True: 'Cool'
* 3. False: 'Not Cool'
*/
return name === 'thesshguy' ? 'Cool' : 'Not Cool';
}
```
If that sounds familiar, it should.
The ternary operator is often used as an alternative to the if/else statement.
Let's rewrite the example above using a ternary operator:
Easy!
But why would you ever choose to use the ternary operator? Is the only difference the syntax, or are there *other* benefits?
Great questions!
### Ternary operators can be used in JSX
One drawback of the if/else statement is that it can't be used inside of JSX:
```typescript
function MyComponent() {
return (
{
if (someCondition) {
return 'True';
}
}
);
}
```
The reason you can't do this has to do with how JSX is converted to HTML under the hood. If you want an in-depth explanation, you can read my post about [how React converts JSX to HTML](https://blog.thesshguy.com/react-jsx-to-html). If you want to skip that post (I totally understand if you do 🙂), here's a quick recap.
When your React code is built, the above gets converted to the following:
```typescript
function MyComponent() {
return React.createElement(
'div',
{},
if (someCondition) {
return 'True';
}
);
}
```
A JSX element's children are passed as arguments to `React.createElement`.
The issue is that an if/else statement can't be used as a value in JavaScript. It can't be passed as a function argument. Since it doesn't have a value, JavaScript can't do anything with it.
It's not a limitation with React, but rather a limitation with JavaScript.
On the other hand, a ternary operator *can* be used in JSX for the same reason. It resolves to a value that *can* be passed to `React.createElement`. This means the following will work:
Another benefit is that this pattern lets us [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) up our code. We don't need to repeat the `` for both conditions.
## 3\. The Logical AND (&&) operator
The final way to render things conditionally in React is with the [Logical AND (&&) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND).
The Logical AND takes two inputs separated by the `&&` operator. If the first value is **truthy** then the second value is returned. If the first value is **falsy** then the first value is returned:
```typescript
function LogicalANDExample() {
return true && 'Hello'; // returns 'Hello'
return false && 'Hello'; // returns false
}
```
This same idea can be used to render JSX elements in a React component. If you make the second value a JSX element, you can conditionally render it based on the first value:
If `props.name` equals the string `thesshguy`, we return the JSX, otherwise, we return `false`.
It should be clear why the second `div` no longer shows up. The condition is `false` so we don't return the `div` in that case. But what about the value that we *are* returning?
What the heck happened to the `false` value and why didn't React render it?
### React doesn't render (*some*) falsy values
Let's say you have a situation where you don't want to render *anything*.
React allows for this by letting you return certain **falsy** values. The most common value that's used for this is `null`:
```typescript
function EmptyComponent() {
return null;
}
function App() {
// I do not render anything
return ;
}
```
This is also the case for `undefined` and `false`, which is why in the example above, nothing is rendered for the second `` element.
### What about 0?
One thing that trips up new React developers is the value `0`. While it *is***falsy**, when you use it as the first value of the Logical AND operator, React *still* renders it:
This can be a bit confusing at first, but it makes sense why React would do this.
There are legitimate reasons why you'd want to render `0`. For example, maybe you want to show a countdown on the page. If React didn't render `0`, you'd have to convert it to a string first.
So how do you get around this issue?
The easiest way is to make sure you return `false` instead:
```typescript
function RenderCount(props) {
return props.count > 0 && Count is {props.count}
;
}
```
One way to do that is with a comparison operator like *greater than*. Not only does `props.count > 0` always return a boolean, it also makes the intention of the code more clear.
Win-Win!
## Conditionals for JSX assignment
JSX isn't limited to `return` statements.
You can assign JSX to a variable. This lets you reuse the JSX in multiple places and keeps the code clean. Variable assignment can take advantage of all the conditional logic that's been mentioned above:
```typescript
function MyComponent() {
let first;
if (someCond) {
first = The if/else statement is true!
;
}
const second = (
The ternary is {someCond ? 'true!' : 'false!'}
);
const third = someCond && The Logical AND is true!
;
return (
{first}
{second}
{third}
);
}
```
What's great about all the examples above is that they rely on standard JavaScript functionality.
By learning how to manage control flow for your React components, you become a better JavaScript developer!