Easy conditional rendering in React/JSX

November 10, 2017

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>

Get the articles and announcements that I never post publicly: