Pasar estado de vuelta al componente principal en React

1. Devolver datos al componente principal con una función de devolución de llamada
2. Pase el estado de regreso al componente principal con accesorios
3. Pasar datos al componente principal desde más de un componente secundario
4. Conclusión

Una cosa que hace que un gran desarrollador se destaque del promedio es la capacidad de escribir códigos limpios y bien formateados.

Ese es el cerebro detrás de la función React que permite que un codificador almacene información y realice operaciones dentro de un componente y luego permita que otro componente acceda a los datos y los use. Esa es la relación entre los componentes hijo y padre en React.

El componente principal o el componente de origen ya tiene una operación para procesar. Un codificador que quiere llevar a cabo otro proceso para reemplazar, actualizar o agregar datos al componente principal crea el componente secundario para hacer esto.

También hay instancias en las que el desarrollador podría querer pasar múltiples datos al padre. La creación de varios componentes secundarios también es una forma ideal de hacer esto.

Esto hará que el componente principal sea más corto y ordenado, con menos código.

Devolver datos al componente principal con una función de devolución de llamada

La función callback es un concepto de React que le permite llamar a una función una vez que se procesa la operación de esa función. Es una forma sencilla de volver a llamar la función en el componente secundario al componente principal.

Comenzaremos creando un nuevo proyecto desde nuestra terminal. Escribimos npx create-react-app illustrationone.

Después de crear el proyecto, vamos a la carpeta en nuestro editor, nos movemos a la carpeta src y creamos un nuevo archivo, Child.js. Trabajaremos con App.js y Child.js en el ejemplo.

Nuestro App.js servirá como nuestro componente principal e iniciaremos la función de devolución de llamada de esta manera:

Fragmento de código (App.js):

import React from 'react';
import Child from './Child'
class App extends React.Component{

    state = {
        name: "",
    }

    handleCallback = (childData) =>{
        this.setState({name: childData})
    }

    render(){
        const {name} = this.state;
        return(
            <div>
                <Child parentCallback = {this.handleCallback}/>
                {name}
            </div>
        )
    }
}
export default App

Primero creamos el estado name, luego declaramos la función de devolución de llamada que obtendrá los datos correspondientes con la variable name del componente Child.js.

Una vez que recuperemos los datos del componente secundario, creamos una función que devolverá los datos asignados a la variable name en Child.js.

A continuación, nos movemos a Child.js, y aquí declaramos la operación que queremos hacer.

Fragmento de código (Child.js):

import React from 'react'
class Child extends React.Component{

    onTrigger = (event) => {
        this.props.parentCallback(event.target.myname.value);
        event.preventDefault();
    }

    render(){
        return(
        <div>
            <form onSubmit = {this.onTrigger}>
                <input type = "text"
                name = "myname" placeholder = "Enter Name"/>
                <br></br><br></br>
                <input type = "submit" value = "Submit"/>
                <br></br><br></br>
            </form>
        </div>
        )
    }
}
export default Child

Producción:

Debido a que queremos devolver estos datos al componente principal, necesitamos una función que inicie la función callback dentro del componente secundario. Aquí es donde necesitamos el detector de eventos onTrigger.

Una vez que hacemos clic en el botón Submit y se muestra el resultado, onTrigger activa inmediatamente la función callback, llevando el valor asignado a la variable name de vuelta al componente principal.

Pase el estado de regreso al componente principal con accesorios

Este es un método más sencillo en comparación con el ejemplo anterior. Usamos props para devolver el resultado procesado al componente principal.

Navegamos hasta la carpeta src y creamos un nuevo archivo, User.js. Este será nuestro componente hijo.

El App.js es nuestro componente principal y pasaremos estos códigos:

Fragmento de código (App.js):

import React from 'react'
import './App.css';
import User from './User'
function App() {
  function getName(name) {
    alert(name)
  }
  return (
    <div className="App">
      <h1>Returning State Back to Parent</h1>
      <User getData={getName} />
    </div>
  );
}

export default App;

Creamos una función de name que dicta al marco de React que queremos que obtenga la fecha asignada a la función name. Entonces queremos alertarlo, es decir, queremos que regrese en forma de ventana emergente.

Luego ponemos un poco más de código en nuestro User.js, que es el componente secundario:

Fragmento de código (User.js):

function User(props)
{
    const name="Oluwafisayo"
    return(
        <div>
            <h1>My Name is : </h1>
            <button onClick={()=>props.getData(name)} >Click Me</button>
        </div>
    )
}

export default User;

Producción:

Aquí asignamos los datos a la función name, y luego, una vez que se presiona el botón Click me, activa el detector de eventos onClick, que devuelve los datos al padre como accesorios. Tenga en cuenta que props es la abreviatura de propiedades.

Pasar datos al componente principal desde más de un componente secundario

Dado que estamos pasando datos al componente principal desde dos componentes secundarios, crearemos un archivo, TodoList.js para el componente principal y dos archivos, Todo.js y DeadlineList.js para los componentes secundarios.

El componente padre albergará los códigos que definirán las funciones para derivar los datos que queremos recuperar de los componentes hijos:

Fragmento de código (TodoList.js):

import React from "react";
import Todo from "./Todo";
import DeadlineList from "./DeadlineList";

const TodoList = ({ todos, toggleTodo }) =>
  console.log(todos) || (
    <table>
      <tbody>
        <tr>
          <th className="taskTH">TASK</th>
          <th className="deadlineTH">DEADLINE</th>
        </tr>
        <tr>
          <td className="taskTD">
            {todos.map((todo) => (
              <Todo
                key={todo.id}
                text={todo.text}
                completed={todo.completed}
                toggleTodoItem={() => toggleTodo(todo.id)}
              />
            ))}
          </td>
          <td className="deadlineTd">
            {" "}
            {todos.map(
              (todo) =>
                console.log("TODO", todo) || (
                  <DeadlineList
                    key={todo.id}
                    value={todo.date}
                    completed={todo.completed}
                    onClick={() => toggleTodo(todo.id)}
                  />
                )
            )}
          </td>
        </tr>
      </tbody>
    </table>
  );

export default TodoList;

A continuación, trabajamos sobre el Todo.js, un formulario. Una vez ingresados ​​los datos y hacemos clic en el botón Add Todo, nos devuelve los datos:

Fragmento de código (Todo.js):

import React, { useState } from 'react';
import wooHooSound from '../utils/wooHoo.js'

const Todo = (props) => {

    const { toggleTodoItem, completed, text } = props;

    let [ shouldPlaySound, setShouldPlaySound ] = useState(true);

    function wooHooEverySecondClick() {
        if (shouldPlaySound) {
            wooHooSound.play();
            setShouldPlaySound(false);
        } else {
            setShouldPlaySound(true);
        }
    }

    return (
        <li className="bananaLi"
            onClick={() => {
                toggleTodoItem();
                wooHooEverySecondClick();
            }}
            style={{
                textDecoration: completed ? 'line-through' : 'none'
            }}
        >

            {text}

        </li>
    );
};

export default Todo;

Luego, DeadlineList.js es responsable de presentar la lista al padre en forma de formato de lista:

Fragmento de código (DeadlineList.js):

import React from "react";

const DeadlineList = ({ onClick, completed, value }) => {
  return (
    <li
      className="deadlineLi"
      onClick={onClick}
      style={{
        textDecoration: completed ? "line-through" : "none"
      }}
    >
      {new Intl.DateTimeFormat("en-US").format(value)}
    </li>
  );
};

export default DeadlineList;

Luego importamos todo lo que hay dentro del App.js:

Fragmento de código (App.js):

import React from 'react';
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList';
import Footer from './Footer';

const App = () => (

    <div className="appCSS">

        <AddTodo />
        <VisibleTodoList />
        <Footer />

    </div>

);

export default App;

Producción:

Conclusión

Cuando los desarrolladores construyen un proyecto en equipo, escribir códigos abreviados coherentes por componente facilita obtener ayuda de los compañeros de equipo. Por el contrario, un proyecto con códigos obstruidos desanimará fácilmente a un compañero desarrollador que quiera ayudar.