0

Necesito ayuda con algo básico en React. Recibo dos valores desde dos "options" en el primer componente usando document.getElementById y las guardo en dos variables.

const handleInputChange = (e) => {   
    const valueFilterActive = document.getElementById("activeFilter").value;
    const valueFilterName = document.getElementById("bussFilter").value;
    alert(valueFilterName+valueFilterActive);   
 };

¿Cómo puedo hacer para que estos dos variables se pueden llamar o leer sus valores desde otro componente? Este sería el código en el segundo componente:

return (
    <> 
      <div className="col-md-4 p-2">
        <FirstComponent/>
  
      </div>
      <div className="col-md-8 p-1 ">
        <div className={ valueFilterActive  === 'Activado' ? "text-success" : "text-primary card mb-1"} key={link.id}>=== 'Activado' ? "text-success" : "text-primary"}>
        <div className={ valueFilterName === 'Activado' ? "text-success" : "text-primary card mb-1"} key={link.id}>=== 'Activado' ? "text-success" : "text-primary"}>

Gracias por adelantado.

1 respuesta 1

1

podrias mejorar mucho mas tu codigo y sacarle provecho a React. Te explico mas a detalle y te doy la solucion tu problematica.

Lo primero, es que podrias hacer uso del Hook que nos provee React llamado useState() que basicamente permite al componente tener un "estado" que almacena ciertos valores. Te dejo un ejemplo de como declararlo:

import React, { useState } from "react";

export default function App() {

  // Nuestro Hook de estado
  const [values, setValues] = useState({
    activeFilter: '',
    bussFilter: ''
  });

  return (
    <h1>Hello World</h1>
  );
}

A nuestro Hook le podemos aplicar array destructuring para extraer dos valores [valor, funcion]. El valor es el valor actual de nuestro State, mientras que la funcion nos permite alterar dicho State (no se puede modificar directamente).

Ahora, manejemos dichos valores con los dos inputs que tienes, para ello creamos la misma funcion llamada handleChange.

import React, { useState } from "react";

export default function App() {

  const [values, setValues] = useState({
    activeFilter: '',
    bussFilter: ''
  });

  const handleChange = e => {
    console.log('the input is changed');
  }

  return (
    <div>
        <input onChange={handleChange} type="text" name="activeFilter" />
        <input onChange={handleChange} type="text" name="bussFilter" />
    </div>
  );
}

Hasta este punto, todo es normal o entendible, unicamente creamos una funcion llamada handleChange que se ejecuta cada que nuestros dos inputs cambian, el siguiente paso, es almacenar el valor de cada input.

import React, { useState } from "react";
import "./styles.css";

export default function App() {

  const [values, setValues] = useState({
    activeFilter: '',
    bussFilter: ''
  });

  const handleChange = e => {
    setValues({
      ...values,
      [e.target.name]: e.target.value
    })
  }

  return (
    <div>
      {console.log(values)}
        <input onChange={handleChange} type="text" name="activeFilter" />
        <input onChange={handleChange} type="text" name="bussFilter" />
    </div>
  );
}

Ahora, ya estamos usando nuestra funcion para modificar nuestro state, pero como funciona?

const handleChange = e => {
    setValues({
      ...values,
      [e.target.name]: e.target.value
    })
  }

Como nuestro state es un objeto, nuestra funcion recibe un objecto (lo cual es el valor que tendra ahora nuestro state). Hicimos una propagacion o copia del state con ...valuesya que si no lo hacemos eliminaremos el valor del otro input que tenemos, despues, hacemos una asignacion dinamica del key del objeto y a esta key le agregamos el valor del input.

Ahora, nuestro state luce de la siguiente forma:

{
    activeFilter: 'esto es un filtro',
    bussFilter: 'otro filtro'
  }

Obviamente los datos seran los que haya en tu input.

Una vez que ya tenemos los datos, podemos enviarlos a cualquier componente mediante props, por lo cual unicamente debemos hacer lo siguiente:

return (
    <OtroComponente values={values}/>
  );

Para extraer dichos valores unicamente debemos hacer:

const MyApp = ({ values }) => {
  return (
    <>
    <p>{values.activeFilter}</p>
    <p>{values.bussFilter}</p>
    </>
  )
}

Espero esto sea lo que buscas, y te haya servido, cualquier duda puedes comentarme!

3
  • Hola Angel, muchísimas gracias. Mucho mejor como lo explicas. Pero aún no me funciona. :( He comprobado con el console.log() que las variables se guardan correctamente en el useState. Pero no me funciona el "envío". No entiendo muy bien donde va <OtroComponente values={values}/> o si se puede hacer de otra forma. Tengo dos componentes. Donde se recoge los datos se llama ProductsFilter.js y donde quiero extraer esos valores es en Products.js En Products.js. Parece ser un error de "Callback" según leo en la consola. Quizás voy en dirección contraria?. Commented el 20 sept. 2020 a las 8:23
  • Solucionado. Cree una función <ProductFilter cualquierNombre = {filtrar}/> donde en el mismo componente coloco: const filtrar = (imprimir) => { console.log(imprimir+"hola mundo"); } ... y desde el otro componente desde donde se envia la información llamo desde el evento handleChange: props.cualquierNombre(e.target.name+" y "+e.target.value); Ya puedo recibir y ya he podido (por fin) comprender la lógica de la comunicación entre componentes.. Mil gracias !!! Commented el 20 sept. 2020 a las 11:08
  • Básicamente lo mismo que has puesto pero me había faltado enviar usando props... Commented el 20 sept. 2020 a las 11:15

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.