Tengo un arr.map renderizado en html, como puedo hacerlo para seleccionar uno de ellos
mi arr es como [{progreso: "A" , _id: "123456"}, {progreso: "A" , _id: "222363"} , ....... ]
Ejemplo: Presione el primer botón para seleccionar arr[0]. Presione el tercer botón para seleccionar arr[2].
A continuación se muestra el documento html
arr.map((arr) => ( <div className={arr._id} id="bookingdata" > <div className="booking-detail"> <p className="booking-id" id="booking-id"> {arr._id} </p> <p className="booking-progress"> {arr.progress} </p> <button onClick={handledetail} className="btn"> btn </button> </div> </div>)); In your array of objects add one more field as isSelected and mark it as false intially const [data,setData]=useState(arr) data.map((arr) => ( <div className={arr._id} id="bookingdata" > <div className="booking-detail"> <p className="booking-id" id="booking-id"> {arr._id} </p> <p className="booking-progress"> {arr.progress} </p> <button onClick={()=>{arr.isSelected=true}} class="btn"> btn </button> </div> </div>));Muchas formas de hacerlo.
Si tendrá muchos elementos y desea resolverlos con un solo controlador, puede hacer algo como esto:
(en su css necesitará una clase "seleccionada")
const [selectedId, setSelectedId] = useState(); function handledetail(e) { setSelectedId(e.currentTarget.dataset.id); // if "_id" is number Number(e.currentTarget.dataset.id) ... } data.map((item) => ( <div className={`${item._id} ${selectedId === item._id ? "selected" : ""}`} id="bookingdata" > <div className="booking-detail"> ... <button onClick={handledetail} data-id={item._id} className="btn"> btn </button> </div> </div> ));