React Bootstrap Onclick List-group-item Highlight The Item/ Active

I have 2 panel with list group on each panel. I am using bootstrap. Issue: onclick first list-group-item on panel 1 it changing style = 'success', but when I click on the second l

Solution 1:

On onSelectDevice function your setting card.style = "success"; to both buttons A and B.

But your not resetting the old style to empty when clicking on B.

either you can do like @Guillermo Quiros solution or you can setState again this.state.cards like below :

let showPropContainer = this.state.cards.slice() or [...this.state.cards];
let cards = showPropContainer.map((val, index) => {
    val.esn === card.esn ? val.style="success" : val.style=""
    return val;
});
this.setState({ selectedCard: card , cards})

Full solution available here

Solution 2:

I once had the same problem and here is how I solved it

      <ListGroupItem
        key={note.id}
        onClick={(id) => handleItemClick(note.id)}
// here on the href attribute I appended an Id just to make it somehow different and it worked for me. 

        href={`#${note.id}`} >

        <h6>{note.title}</h6>
      </ListGroupItem>