Tengo una cuadrícula que tiene varios botones, la cantidad de botones varía según la fila. Por ejemplo, la fila 1 podría tener 4 botones, la fila 2 podría tener 3, la fila 3 podría tener 3, etc. Estoy tratando de llegar a donde cuando hago clic en un botón, cambia no solo su color de fondo, sino cada botón en la cuadrícula que también tiene el mismo texto. Entonces, si mis botones se ven así:
[ text ] [ moreText ] [ someMoreText ] [ texting] [ textAgain ] [text] [textAgain] [ someMoreText] La idea es que cuando haga clic en el botón [ text ] en la fila 1, también cambiará el botón en la columna 3 de la fila 2 que también es [ text ] .
En este momento, puedo hacer que cambie un botón, pero estoy atascado en hacer que cambien los demás. A continuación se muestra mi código.
GridComponent.js
import React from "react"; import ButtonComponent from "./ButtonComponent"; const GridComponent = ({ arrayOfArray }) => { const renderColumns = (array) => { const columns = array.map((buttonText, index) => { return ( <div key={index}> <div className="column"> <ButtonComponent buttonText={buttonText} /> </div> </div> ); }); return columns; }; const renderRows = () => { const rows = arrayOfArry.map((array, index) => { return ( <div key={index} className="row"> {renderColumns(array)} </div> ); }); return rows; }; return ( <div> <div className="ui grid">{renderRows()}</div> </div> ); }; export default GridComponent;ButtonComponent.js
import React, { useState } from "react"; const ButtonComponent = ({ buttonText }) => { const [status, setStatus] = useState(false); const color = status ? "green" : "blue"; return ( <div className={`ui ${color} button`} onClick={() => setStatus(!status)}> {buttonText} </div> ); }; export default ButtonComponent;Debe mantener el estado en el nivel de GridComponent , no en cada ButtonComponent , que no tiene conocimiento de otros botones.
Puede hacer esto usando un objeto de "mapa" que asigna el texto del botón a su estado.
const GridComponent = ({ arrayOfArray }) => { const [statuses, setStatuses] = useState({}); ... Y pase este mapa y la función de actualización al ButtonComponent :
<ButtonComponent buttonText={buttonText} status={statuses} updateStatus={setStatuses} /> Y en el ButtonComponent establezca las bases de color en el estado en el mapa para el texto de este botón:
const ButtonComponent = ({ buttonText, status, updateStatus }) => { const color = status[buttonText] ? "green" : "blue"; return ( <div className={`ui ${color} button`} onClick={() => updateStatus({ ...status, [buttonText]: !status[buttonText] }) } > {buttonText} </div> ); };Puedes ver cómo funciona en codesandbox