Necesito configurar el nombre de clase activo en varios elementos onclick dentro de un .map
Lo he implementado solo realiza un seguimiento del índice activo de clic actual
Necesito la lista de elementos activos en los que se hizo clic.
const [activeIndex, setActiveIndex] = useState(-1); return ( <> {data?.map((item, index) => { return ( <Col className={`mb-3 ${ index === activeIndex ? "selected" : "notselected" }`} key={item.id} onClick={() => { handleclick(item.id, index, item.name); setActiveIndex(index); }} xs={6} md={2} > <div className={`common-cat-listener pop-cat-${item.id} all`} > <h4 className="cat-text py-4 px-3">{item.name}</h4> </div> </Col> ); })} </>Dado que necesita realizar un seguimiento de varios elementos, el estado para eso no puede ser solo un número (a menos que use la multiplicación de números primos o algo absurdo similar). Utilice una matriz de valores booleanos en su lugar.
const [activeIndicies, setActiveIndicies] = useState(() => data.map(() => false)); return ( <> {data?.map((item, index) => { return ( <Col className={`mb-3 ${ activeIndicies[index] ? "selected" : "notselected" }`} key={item.id} onClick={() => { handleclick(item.id, index, item.name); setActiveIndicies(activeIndicies.map((bool, j) => j === index ? true : bool); }} ...Pequeña demostración:
const App = () => { const data = [1, 2, 3]; const [activeIndicies, setActiveIndicies] = React.useState(() => data.map(() => false)); return data.map((item, index) => { return ( <span className={activeIndicies[index] ? "selected" : "notselected"} onClick={() => { setActiveIndicies(activeIndicies.map((bool, j) => j === index ? true : bool)); }} >{item}</span> ) }) }; ReactDOM.render(<App />, document.querySelector('.react')); .selected { color: yellow; } <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>Parece que tiene una identificación para sus artículos. Supongo que todos son únicos. Si es así, podría cambiar su estado por una matriz en su lugar. El método on Click luego agregaría items.id dentro de la matriz y en lugar de hacer
index === activeIndexPodrías hacerlo :
activeIds.includes(item.id) ? // rest of code