• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

92
Vistas
Cambio de estado en varios elementos de React en una cuadrícula

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;
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda