How to change button color depending on array element in ReactJS

Question

Say I have two arrays like this:

state = {
   firstArr: ['one', 'two', 'three', 'four', 'five'],
   secondArr: ['one', 'three', 'four']
}

and I'm having a list of buttons like below:

{firstArray.map((item, index) => (
    <label className="btn btn-secondary" key={index}>
        <input type="checkbox" onChange={this.handleAddItem} value={item} /> {item}                              
    </label>
))}

How do I apply a different background color only to the buttons listed in the second array?

tanmay · Accepted Answer · 2020-11-28 04:01:52Z

2

You need to have a conditional class like this, based on whether the current item is part of secondArr or not.

{firstArray.map((item, index) => (
    <label
        className={`btn btn-secondary ${secondArr.includes(item) ? 'different-bg-class' : ''}`}
        key={index}
    >
        <input type="checkbox" onChange={this.handleAddItem} value={item} /> {item}                              
    </label>
))}

answered Nov 28, 2020 at 4:01

tanmay

7,9112 gold badges24 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

How to change button color depending on array element in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related