better jsx condition to order component

Question

I have an icon position prop that decide whether it's placed on the left or on the right of the children. I have this working

<List>
    {iconPosition === 'right' && (
        <Text />
    )}
    {icon && (
        <Icon />
    )}
    {iconPosition === 'left' && (
        <Text />
    )}
</List>

But I think it can be more simple, although in my opinion my above code is readable.

Answer 1

You can't do this any other way. You're using individual conditions with their own result.

Maybe you could place them on one line to make them more readable.

<List>
    {iconPosition === 'right' && <Text />}
    {icon && <Icon />}
    {iconPosition === 'left' && <Text />}
</List>

or

render() {
  const textLeft = (iconPosition === 'left');
  const textRight = (iconPosition === 'right');

  ...
}

And use that. But that's mostly down to your preference / the coding style you and your colleagues are using..