Necesito configurar el nombre de clase activo en varios elementos onclick dentro de un .map
Necesito la lista de elementos activos en los que se hizo clic.
Los elementos en los que se hizo clic se resaltarán en amarillo, y cuando vuelva a hacer clic en el mismo elemento, se eliminará de los elementos de la lista activa.
const [data, setData] = useState([]); const [activeIndicies, setActiveIndicies] = useState(() => data?.map(() => false) ); useEffect(() => { // This data is coming from the API response const data = [ { id: 1, name: "one" }, { id: 2, name: "two" }, { id: 3, name: "three" } ]; setData(data); }, []);declaración de devolución
onClick={() => { setActiveIndicies( activeIndicies.map((bool, j) => (j === index ? true : bool)) ); }}Gracias.
prueba este:
import "./styles.css"; import React, { useState, useEffect } from "react"; export default function App() { const [data, setData] = useState([ { id: 1, name: "one", active: false }, { id: 2, name: "two", active: false }, { id: 3, name: "three", active: false } ]); return ( <div className="App"> <h2>Set active className to multiple items on .map</h2> {data?.map((item, index) => { return ( <p className={data[index].active ? "selected" : "notselected"} onClick={() => { setData((prevState) => _.orderBy( [ ...prevState.filter((row) => row.id !== item.id), { ...item, active: !item.active } ], ["name"], ["asc"] ) ); }} > {item.name} </p> ); })} </div> ); }Puede lograr esto simplemente haciendo algunos cambios menores en su código:
// Changing the state value to an object so that it can // store the active value for exact item ids const [activeIndicies, setActiveIndicies] = useState({}); Luego dentro de .map()
.... // Checking if there is any value for the item id which is being mapped right now. const selected = activeIndicies[item.id]; return ( <p className={selected ? "selected" : "notselected"} onClick={() => { /* Then setting the state like below where it toggles the value for particular item id. This way if item is selected it will be deselected and vice-versa. */ setActiveIndicies((prevState) => { const newStateValue = !prevState[item.id]; return { ...prevState, [item.id]: newStateValue }; }); }} // Key is important :) key={item.id} > {item.name} </p> );