Hice tres botones usando 'mapa'. También especificó una función para cambiar el valor falso a verdadero al hacer clic.
Sin embargo, si presiona un botón, se activan los tres botones. ¿Cómo puedo activar un solo botón?
falso = #fff verdadero = azul
const [funnalBtn, setFunnalBtn] = useState(false); const hadleChangeBtnColor = () => { setFunnalBtn(prev => !prev); }; <FunnalTarget> {FUNNAL_DATA.map(data => { return ( <FunnalButton key={data.id} text={data.text} hadleChangeBtnColor={hadleChangeBtnColor} funnalBtn={funnalBtn} /> ); })} </FunnalTarget>ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí
Puede definir un estado selectedBtn y pasarle la identificación del objetivo seleccionado:
const [selectedBtn, setSelectedBtn] = useState(-1); const hadleChangeBtnColor = (id) => { setSelectedBtn(id); }; <FunnalTarget> {FUNNAL_DATA.map(data => { return ( <FunnalButton key={data.id} text={data.text} hadleChangeBtnColor={() => setSelectedBtn(data.id)} funnalBtn={selectedBtn === data.id} /> ); })} </FunnalTarget>