0

Tengo tres contenedores en los cuales estoy insertando botones con diferentes nombres, necesito obtener el nombre de cada boton insertado en cada contenedor y que todo este dentro de un array por ejemplo :

Contenedor Filas: inserte el btn empresa Contenedor Columnas: inserte el btn soles Contenedor Valores: inserte el btn fecha

El array deberia ser asi: ['empresa', 'soles', 'fecha']

Mi pregunta es: como puedo saber el nombre de cada botón que inserte en cada contenedor, sin tener que dar click en el contenedor ni en el botón que estoy insertando.

import React, { useState } from "react";
import "../assets/styles/Container.css";
import { ReactSortable } from "react-sortablejs";
import ButtonApp from "./ButtonApp";
import { getData } from "../services/api_aralsoft";

const Container = () => {
  
  const [row, setRow] = useState([]);
  const [column, setColumn] = useState([]);
  const [values, setValues] = useState([]);

  return (
    <>
      <div className="bottomContainer">
        <section className="itemsSelected">
          <div className="containerVertical">
            <div className="containerR">
              Filas
              <ReactSortable list={row} setList={setRow} group="selectedButton">
                {!row
                  ? "Cargando..."
                  : row.map((item, index) => (
                      <button className="btnSelect" key={index}>
                        {item}
                      </button>
                    ))}
              </ReactSortable>
            </div>
          </div>
          <article className="container_col_val">
            <div className="containerHorizontal">
              <div className="containerR">
                Columnas
                <ReactSortable
                  list={column}
                  setList={setColumn}
                  group="selectedButton"
                >
                  {!column
                    ? "Cargando..."
                    : column.map((item, index) => (
                        <button className="btnSelect" key={index}>
                          {item}
                        </button>
                      ))}
                </ReactSortable>
              </div>
            </div>
            <div className="containerHorizontal">
              <div className="containerR">
                Valores
                <ReactSortable
                  list={values}
                  setList={setValues}
                  group="selectedButton"
                >
                  {!values
                    ? "Cargando..."
                    : values.map((item, index) => (
                        <button className="btnSelect" key={index}>
                          {item}
                        </button>
                      ))}
                </ReactSortable>
              </div>
            </div>
          </article>
        </section>
        <section>
          <ButtonApp name="Generar Reporte" />
        </section>
      </div>
    </>
  );
};

export default Container;

8
  • A qué te refieres con el nombre del botón?
    – Sr1871
    Commented el 20 oct. 2022 a las 22:07
  • @Sr1871 cada boton tiene un nombre por ejemplo 'empresa', 'cantidad', etc. cuando inserto cualquiera de esos botones dentro de un contenedor, necesito saber cual es el boton que estoy insertando, osea obtener el nombre de ese boton insertado dentro del contenedor. ME explico?
    – Ndmo
    Commented el 20 oct. 2022 a las 22:14
  • Pero te refieres al texto del botón, es decir a la linea de {item}?
    – Sr1871
    Commented el 21 oct. 2022 a las 1:34
  • Cual es la finalidad de conocer sus nombres? Que harás con esa información? Mostrar ese dato en el botón? Cuál es la estructura de filas, columnas y value?
    – GmrYael
    Commented el 21 oct. 2022 a las 14:02
  • 1
    Entonces por lo que entiendo el flujo de tu aplicación es: almacenar dentro un botón el nombre(valor utilizado para consultar el API) y que al presionar sobre este botón te muestre los datos filtrado por ese valor, y que el evento onClick de dicho botón te haga la petición tomando en cuenta el valor del botón que presiones?
    – GmrYael
    Commented el 21 oct. 2022 a las 14:10

1 respuesta 1

1

Lo que se me ocurre que puedes hacer es usar la propiedad de ref callback que ofrece react para llamar un método que inserte en tu array el nombre que recibe del componente que se cargo.

Seria algo asi:

let botones = []

const add_to_array = (button) => {
   botones.push(button.key)
   setRow(botones)
}

{!row
  ? "Cargando..."
  : row.map((item, index) => (
      <button className="btnSelect" key={index} ref={(button) => add_to_array(button)}>
        {item}
      </button>
    ))}
10
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 21 oct. 2022 a las 15:26
  • @Cloud89 cambie el key por textContent quedando algo asi ``` let botones = []; const add_to_array = (button) => { //console.log(button); const x = botones.push(button.textContent); console.log("el push y el text content ", x); //setRow(botones); console.log("agregando botones al array vacio", botones); }; ``` funciona... si se agregan los botones al array justo lo que necesito pero me genera este error ahora : Uncaught TypeError: Cannot read properties of null (reading 'textContent')
    – Ndmo
    Commented el 21 oct. 2022 a las 17:32
  • 1
    Tu método podría quedar así const add_to_array = (button) => { button ? botones.push(button.key) : null setRow(botones) }
    – Cloud89
    Commented el 21 oct. 2022 a las 17:54
  • 1
    @Naidamag Se cicla tu aplicación. Porque? Tu código genera tus componentes los cuales reaccionan al estado "row", luego se crea el componente BUTTON, que pasa cuando se crea este componente? el estado "row" es alterado, osease, que tu componente se creara desde 0 otra vez, y pasara lo mismo una y otra y otra vez, lo que tendrás que hacer es cambiar la logica de tu codigo, tal vez guardar tu arreglo de nombres en una variable y no en un estado, o tenerla en un estado aparte y cargar tu arreglo solo cuando se usen los botones, etc.
    – Cloud89
    Commented el 21 oct. 2022 a las 18:13
  • 1
    Una regla importante en React es no mutar estados directamente en la renderización de un componente el problema aquí es que a diferencia de propiedades como onClick, ref sera disparada en cuanto el componente sea montado por lo que es preferible que este no interactue directamente con un estado
    – Cloud89
    Commented el 21 oct. 2022 a las 18:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.