Resolve the component to render in a variable

Sat Oct 09 2021

More readable way to render

Tips & Tricks

You can set what component to return before actually doing it. Here’s the example of what I mean:

return booleanFlag ? (
  <IconA height={32} width={32} />
) : (
  <IconB height={32} width={32} />
);

And here’s how to fix it:

import IconA from 'icons/IconA';
import IconB from 'icons/IconB';
...
const IconComponent = booleanFlag ? IconA : IconB;

  return (
    <IconComponent
      height={32}
      width={32}
    />
  );