Pasar datos del componente secundario al principal en React

React es la biblioteca front-end más popular por múltiples razones. La reutilización de los componentes es una de las mayores ventajas de React.

La biblioteca le permite dividir su aplicación web en fragmentos de código muy pequeños, cada uno con su funcionalidad y diseño. Luego puede usar estos componentes más pequeños para construir componentes más grandes, y así sucesivamente.

Las aplicaciones React son esencialmente un árbol de componentes, con un componente principal en la parte superior. Dado que la reutilización de los componentes es tan importante, debe haber una forma de compartir datos entre los componentes de React.

Pasar datos del componente secundario al principal en React

En React, es bueno tener una única fuente de verdad, generalmente el componente en la parte superior del árbol. Los desarrolladores de React pueden usar objetos props para pasar manualmente los datos del padre a los hijos.

Los componentes hijos pueden acceder al valor que se les pasa y pasarlo a sus hijos. De esta forma, los datos del componente principal se pueden pasar a varios niveles del árbol de componentes.

A veces, los componentes para niños contienen elementos de entrada, como campos de texto, casillas de verificación, radios y menús desplegables. Si desea almacenar los valores de los elementos de entrada, debe obtener estos valores de los componentes secundarios al principal.

Los componentes principales pueden usar “accesorios” para transmitir funciones de devolución de llamada a sus hijos. En otras palabras, puede definir una función (generalmente un controlador de eventos) en el componente principal y pasarla como una función de devolución de llamada.

En esencia, puede usar la función de devolución de llamada para manejar el evento en el componente secundario y pasar el valor del elemento de entrada como un argumento a la función de devolución de llamada que se transmite como un accesorio. La función se ejecutará y actualizará el estado en el componente principal.

Echemos un vistazo a este ejemplo.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [name, setName] = useState("");
  console.log(name);
  const handleChange = (e) => setName(e.target.value);
  return (
    <div className="App">
      <Input handler={handleChange}></Input>
    </div>
  );
}
function Input(props) {
  return (
    <div className="App">
      <p>Enter the name</p>
      <input type="text" onChange={(e) => props.handler(e)}></input>
    </div>
  );
}

La demostración en vivo muestra que la devolución de llamada se llama en el componente secundario, pero se ejecuta en el componente principal y actualiza su estado.

Es un ejemplo básico en el que llamamos al gancho useState() para inicializar la variable de estado name en una cadena vacía. También creamos la función setName para actualizarlo.

Nuestra función handlechange toma un argumento, un evento sintético, y pasa el valor actual a la variable de estado name en el cuadro de texto. El controlador de eventos no se llama en el componente principal.

Se define allí, pero se transmite como un accesorio de controlador al elemento secundario Entrada y se llama allí.

Llamamos a la función console.log() en el componente principal para cerrar la sesión de la variable de estado. Verás en la consola que se actualiza el valor de la variable de estado.