Easy conditional rendering in React/JSX

November 10, 2017
I'm making an alternative to DevTools. Click here to check it out.

Time for an easy React tip! One of my favorite features building with React is inline conditional rendering. Here’s how to use it:

Inline IF rendering

const Example = ({ value }) =>
  <div>
    { value && <AppearsIfValueIsTruthy /> }
  </div>

Inline IF-ELSE rendering

const Example = ({ value }) =>
  <div>
    { 
      value
      ? <AppearsIfValueIsTruthy />
      : <AppearsIfValueIsFalsy />
    }
  </div>