No puedo alternar un botón en particular. Quiero alternar ese botón en particular en una serie de botones. Aquí está el enlace del código de demostración . Corríjalo y comparta el problema resuelto.
import { useState } from 'react'; import { data } from './data'; import "./styles.css"; export default function App() { const [state, setState] = useState({ toggle: true, index: '' }) const onJoin = () => { setState({ ...state, toggle: !state.toggle }) } const onRequest = () => { setState({ ...state, toggle: !state.toggle }) } return ( <div className="App"> {data.map(data => { return(<div className='container'> <h1>{data.name}</h1> {state.toggle ? <button onClick={() => onJoin()}>Join</button> : <button onClick={() => onRequest()} >Request</button> } </div>) })} </div> ); }Está utilizando una variable de estado para todos los botones. Necesita una matriz para realizar un seguimiento de los botones que se alternan
En lugar de hacer que toggle sea un valor booleano, conviértalo en una matriz booleana.
import { useState } from "react"; import { data } from "./data"; import "./styles.css"; export default function App() { const [state, setState] = useState({ toggle: [], index: "" }); const onJoin = (index) => { setState((state) => ({ ...state, toggle: state.toggle.filter((t) => t !== index) })); }; const onRequest = (index) => { setState((state) => ({ ...state, toggle: [...state.toggle, index] })); }; return ( <div className="App"> {data.map((d, index) => ( <div key={index} className="container"> <h1>{d.name}</h1> {state.toggle.includes(index) ? ( <button onClick={() => onJoin(index)}>Join</button> ) : ( <button onClick={() => onRequest(index)}>Request</button> )} </div> ))} </div> ); }