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>

Want more?

My newsletter sends rarely. It's where I share updates on the best of my writing: introverted entrepreneurship, esoteric mindset tips, notes from great books, and automating businesses as a solo-owner so they run by themselves. Want to join?

Subscribe