How to conditionally render components in ReactJS?

Web Development
, ,
#1

In some cases we may want to render different components depending on some state. JSX does not render false or undefined, so we can use conditional short-circuiting to render a given part of our component only if a certain condition is true.

const MyComponent = ({ name, address }) => (
  <div>
    <h2>{name}</h2>
    {address &&
      <p>{address}</p>
    }
  </div>
)

If we need an if-else condition then we may use ternary operator.

const MyComponent = ({ name, address }) => (
  <div>
    <h2>{name}</h2>
    {address
      ? <p>{address}</p>
      : <p>{'Address is not available'}</p>
    }
  </div>
)