React Styled Components conditional ternary operator

Question

I'm trying to conditionally style a box with three different colors depending on the value of my test.

if test = A or B, it needs to be yellow
if test = C, it needs to be green,
if test = anything else, it needs to be blue.

I would rather write a switch or if/else, but I don't know if its possible to not use a ternary operator with Styled Components.

Tholle Tholle · Accepted Answer · 2018-07-19T17:14:10

props => ... is just an arrow function with implicit return, so you could give the arrow function a body and accomplish what you want with if/else statements.

You could use props.data && props.data.test to make sure that props.data is set before you try to access test.

color: ${props => {
  const test = props.data && props.data.test;

  if (test === 'A' || test === 'B') {
    return 'yellow';
  } else if (test === 'C') {
    return 'green';
  } else {
    return 'blue';
  }
}};

React Styled Components conditional ternary operator

1 Answers