Nested Conditional Styling with CSS/JavaScript

Question

In my React app I have a box which is styled. The component holds state. I would like to change the colour of the box dependant on the colour.

For example, if selectedID = 1, pink, if selectedID = 2, green etc and so on.

I've tried something like this with no success:

<InformationContainer
// style={ {backgroundColor: selectedID < 2  || selectedID > 2 ? '#ebedfb':'#ffe5e5'}}
style={ {backgroundColor: 
selectedID < 4 ? '#ffe5e5':
selectedID < 3  || selectedID > 2 ? '#414c97':
selectedID < 3  || selectedID > 3 ? '#65bb2c':
selectedID < 3  || selectedID > 3 ? 'yellow':
'white'
}}
>

I would like o have this for all 4 boxes and pieces of state.

What is the issue you are having, no background color at all or just sticks with some value and doesn't change? Can you also show how you set selectedID? — Sinan Yaman
– Sinan Yaman, Commented Aug 16, 2022 at 15:07
All that logic should be extracted to a function (or just a data object) on the parent component. Markup should be kept clean. — isherwood
– isherwood, Commented Aug 16, 2022 at 15:31

Matt B. · Accepted Answer · 2022-08-16 15:18:15Z

1

To me it seems like the selectedID will always be less than four so it never makes it past the first check. As well some of your checks don't make sense. Something like this would work better.

style={ {backgroundColor: 
    selectedID == 4 ? '#ffe5e5':
    selectedID == 3 ? '#414c97':
    selectedID == 2 ? '#65bb2c':
    selectedID == 1 ? 'yellow':
    'white'

answered Aug 16, 2022 at 15:18

Matt B.

595 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Félix Paradis · Accepted Answer · 2022-08-16 15:36:16Z

1

If you're not a big fan nested ternaries (I'm not), you could extract that logic in a small function.

getBgColor(selectedID) {
  if(selectedID === 4) return '#ffe5e5';
  if(selectedID === 3) return '#414c97';
  if(selectedID === 2) return '#65bb2c';
  if(selectedID === 1) return '#yellow';
  return 'white';
}
// ***
<InformationContainer
  style={ {backgroundColor: getBgColor(selectedID)} }
>

answered Aug 16, 2022 at 15:36

Félix Paradis

6,1696 gold badges45 silver badges54 bronze badges

Collectives™ on Stack Overflow

Nested Conditional Styling with CSS/JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related