Tengo una lista de elementos que se muestran en la interfaz de usuario en un componente de clase React. Cualquier elemento en el que el usuario haga clic debe volverse verde, mientras que el resto es gris. También quiero que cada elemento tenga un color verde flotante.

Lo que tengo actualmente no funciona. Si hago clic en un elemento de la lista, TODOS los elementos de la lista se vuelven verdes. Luego, si hago clic en otro elemento de la lista, todo vuelve a ser gris.

JS:

 class AFile extends Component { constructor(props) { super(props); this.state = { selected: false } } handleClick= (index) => { // do stuff with index this.setState(selected: !this.state.selected); } const list = [ {order: 1, name: 'a'}, {order: 2, name: 'b'}, {order: 3, name: 'c'} ] render() { return ( list.map( (item, index) => { return ( <div key={index}> <Link to='#' onClick={()=>this.handleClick(index)} className={ this.state.selected ? 'list-item-selected' : 'list-item } > {item.order}. {item.name} </Link> </div> ) } ) } }

CSS:

 .list-item { color: gray; } .list-item:hover { color: green; } .list-item-selected { color: green; }