perdón por preguntar. Tengo un botón, luego agrego una clase activa cuando hago clic en él, pero cuando hago clic en él, todos los botones se activan, ¿cómo lo soluciono? este es el codigo
<div className=""> {category.items.length === 0 ? ( <div>There is no property at this categories</div> ) : ( category.items.map((item, index2) => { return ( <div key={`category-${index1}-item-${index2}`}> {buttons.map((buttonLabel, i) => ( <button key={i} name={buttonLabel} onClick={(event) => handleClick(event, i)} className={ i === clickedId ? 'py-4 pl-3 customButton active ' : 'customButton py-4 pl-3' } > {item.name} </button> ))} </div> ); }) )} </div>y este es el código cuando se llama al botón
<ButtonCategory data={category.categories} buttons={[category.categories]} doSomethingAfterClick={printButtonLabel} />está devolviendo el mismo conjunto de botones para cada artículo. hay mejores maneras de hacer esto, pero con su configuración actual, esto debería funcionar:
buttons.map((buttonLabel, i) => { const key = `${index2}.${i}` return ( <button key={key} name={buttonLabel} onClick={(event) => handleClick(event, key)} className={ key === clickedId ? "py-4 pl-3 customButton active " : "customButton py-4 pl-3" } > {item.name} </button> )});simplemente no olvide inicializar su estado clickedId como nulo o sin definir en lugar de número
debe establecer el índice del botón en el que se hizo clic como clickedId en la función handleClick. por lo que su función handleClick debe ser así
const handleClick = (event, i) => { setClickedId(i) // other logic }