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 list-group-item on panel 1 style change to "success" but not changing the first list-group-item style to default (style = "").

onclick on list-group-item it should change style or active or change the background color. Highlight the selected item and remove it when click on another item on the respective panel.
Alternative <ListGroupItem href="#" active>

my code: Code

回答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

回答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>

来源：https://stackoverflow.com/questions/52160077/react-bootstrap-onclick-list-group-item-highlight-the-item-active