Soy nuevo en reaccionar y estoy tratando de hacer un botón de selección donde solo se puede seleccionar un elemento y anula la selección de los demás elementos. He llegado a seleccionar un elemento, pero no a anular la selección de la parte de otros elementos.

A continuación se muestra el código de mi componente:

 class Diamond extends React.Component { constructor(props) { super(props); this.selectDiamond = this.selectDiamond.bind(this); this.state = {selected : false}; } selectDiamond() { this.setState( {selected : true} ); } render() { if (this.state.selected == true) { return ( <div onClick={this.selectDiamond} className="diamond-selected hover:scale-[105%] duration-300 ">{this.props.text}</div> ) } else { return( <div onClick={this.selectDiamond} className="diamond-unselected hover:scale-[105%] duration-300 ">{this.props.text}</div> ) } } }

y así es como lo renderizo:

 <div> {["BOY", "GIRL", "BAKLA", "TOMBOY"].map((item, i) => ( <Diamond key={i} text={item}/> ) )} </div>

Sé que necesito una referencia a los <Diamond/> s, así que probé algo como:

 let diamonds = []; //and on the constructor method of the component constructor(props) { super(props); diamonds.push(this); }

pero por alguna razón cuando llamo a diamonds.length me da el doble de la cantidad de elementos creados, y tampoco sé qué hacer a partir de ahí. También me gustaría que el primer elemento se seleccione de forma predeterminada.