in my React application, I have a table (using semantic ui). I want to change bgcolor via a condition. in most examples I see like bgcolor={(condition)?'red':'blue'} but I need to check if the value exists in an array. so if value is in arrayOne apply a bgcolor, if value is in arrayTwo apply another color else no bgcolor

I tried this which is wrong

                    <Table.Cell
                      key={value}
                      selectable
                      {...arrayOne.includes(value)?{bgcolor="red"}:{}}
                      {...arrayTwo.includes(value)?{bgcolor="blue"}:{}}
                    >
                      {value}
                    </Table.Cell>

in my React application, I have a table (using semantic ui). I want to change bgcolor via a condition. in most examples I see like bgcolor={(condition)?'red':'blue'} but I need to check if the value exists in an array. so if value is in arrayOne apply a bgcolor, if value is in arrayTwo apply another color else no bgcolor

I tried this which is wrong

                    <Table.Cell
                      key={value}
                      selectable
                      {...arrayOne.includes(value)?{bgcolor="red"}:{}}
                      {...arrayTwo.includes(value)?{bgcolor="blue"}:{}}
                    >
                      {value}
                    </Table.Cell>

• javascript
• html
• reactjs
• semantic-ui

3 Answers 3

Use style instead of bgcolor as it is no longer supported in HTML5. Even if you try it without the conditional logic, bgcolor will not affect the <td>, regardless of React. Per W3Schools:

The bgcolor attribute of is not supported in HTML5. Use CSS instead.

Setting style property conditionally within the render() function. This example uses @OlivierBoissé approach for conditionally setting the value, but you could really use any conditional approach you are fortable with and ESLint doesn't plain about. You can use CSS inherit as a default value when working with background-color:

// default
let backgroundColor = 'inherit';

if (arrayOne.includes(value)) {
  backgroundColor = 'red';
} else if (arrayTwo.includes(value)) {
  backgroundColor = 'blue';
}

{/* or if you need one color to take precedence when value is in both arrays
if (arrayOne.includes(value)) {
  backgroundColor = 'red';
}
if (arrayTwo.includes(value)) {
  backgroundColor = 'blue';
}
*/}

<Table.Cell
key={value}
selectable
style={{backgroundColor}}
>
  {value}
</Table.Cell>

Alternatively you can also use className instead of style:

.foo { background-color: red; }
.bar { background-color: blue; }

let backgroundColor = '';

if (arrayOne.includes(value)) {
  backgroundColor = 'foo';
} else if (arrayTwo.includes(value)) {
  backgroundColor = 'bar';
}

<Table.Cell className={backgroundColor} ...>

Here is a working StackBlitz example.

Hopefully that helps!

Create a function

getColor = (value) => array2.includes(value) ? {bgcolor:'red'} : array1.includes(value) ? {bgcolor:'blue'} : {}

And <Cell {...getColor()} />

You can declare a variable and use conditions to determine its value

let bgcolor;

if(arrayOne.includes(value)) {
  bgcolor = 'red';
} else if( arrayTwo.includes(value)) {
  bgcolor = 'blue';
}

then

<Table.Cell
    key={value}
    selectable
    bgcolor={bgcolor}
>
  {value}
</Table.Cell>