Tengo una serie de botones que se procesan usando .map para imprimir las filas en la tabla de datos. Cada fila tiene un botón que activa la ventana emergente del panel Editar. El problema que tengo actualmente es cuando se hace clic en un botón, el panel Editar en todas las filas.
El código:
const [showEdit, setShowEdit] = useState([]); <tbody> {appSettingsList.map((appSettings, i) => ( <tr key={i}> <td>{appSettings.Name}</td> <td>{appSettings.BackgroundColor}</td> <td>{appSettings.FontSize}</td> <td>{appSettings.FontFamily}</td> <td>{appSettings.Theme}</td> <td>{appSettings.NavigationBar}</td> <td className="action-column"> <button key={i} className="button-green" onClick={() => setShowEdit(!showEdit)} > Edit </button> </td> <td>{showEdit ? <EditApplicationSettings /> : null}</td> </tr> ))} </tbody>¿Cómo puedo hacer que cada botón tenga un estado diferente?
Su estado debe ser el índice de la fila activa
const [activeIndex, setActiveIndex] = useState(null); <tbody> {appSettingsList.map((appSettings, i) => ( <tr key={i}> <td>{appSettings.Name}</td> <td>{appSettings.BackgroundColor}</td> <td>{appSettings.FontSize}</td> <td>{appSettings.FontFamily}</td> <td>{appSettings.Theme}</td> <td>{appSettings.NavigationBar}</td> <td className="action-column"> <button key={i} className="button-green" onClick={() => setActiveIndex(i)} > Edit </button> </td> <td>{activeIndex === i ? ( <button key={i} className="button-green" onClick={() => setActiveIndex(null)} > Edit </button> ) : ( <button key={i} className="button-green" onClick={() => setActiveIndex(i)} > Edit </button> )}</td> </tr> ))} </tbody>Debe manejar la lógica de edición para cada fila de forma independiente.
TableRow alternando la lógica de vista de edición. const TableRow = ({ appSettings, i }) => { const [showEdit, setShowEdit] = useState([]); return ( <tr key={i}> <td>{appSettings.Name}</td> <td>{appSettings.BackgroundColor}</td> <td>{appSettings.FontSize}</td> <td>{appSettings.FontFamily}</td> <td>{appSettings.Theme}</td> <td>{appSettings.NavigationBar}</td> <td className="action-column"> <button key={i} className="button-green" onClick={() => setShowEdit(!showEdit)} > Edit </button> </td> <td>{showEdit ? <EditApplicationSettings /> : null}</td> </tr> ); };TableRow sobre los elementos de TableRow. <tbody> {appSettingsList.map((appSettings, i) => ( <TableRow appSettings={appSettings} i={i} /> ))} </tbody>