It is used when you want to render content if a condition is true; otherwise, nothing will be rendered.
```jsx
return (
  <li className="item">
    {name} {isPacked && '✔'}
  </li>
);
```

University of Michigan - Ann Arbor

Conditional rendering works the same as JavaScript's if statement and ternary operators.

```jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = props.state;
  }

  render() {
    if (this.state) return <div>State is true</div>
    return <div>State is false</div>
  }
}
```

Conditional Rendering

https://react.dev/learn/conditional-rendering

React Conditional Rendering

In some cases we won't want to render nothing, in that case we need to return null.
```jsx
function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  return <li className="item">{name}</li>;
}
```

Conditionally Rendering with Null in React

You can use ternary operator from JavaScript to render.

Instead of this:
```jsx
if (isPacked) {
  return <li className="item">{name} ✔</li>;
}
return <li className="item">{name}</li>;
```

You can write this:
```jsx
return (
  <li className="item">
    {isPacked ? name + ' ✔' : name}
  </li>
);
```

Conditional Rendering with ternary operator in React Js

Conditional rendering with AND operator in React Js

With an "if" statement, you can reassign a "let" variable. First, set the default value that you want to display. Then, in the "if" condition, you can reassign the variable.
```jsx
let itemContent = name;
if (isPacked) {   itemContent = name + " ✔"; }
<li className="item">
  {itemContent}
</li>
```

Learn Before

Related