Transmettre l'état au composant parent dans React

1. Renvoyer les données au composant parent avec une fonction de rappel
2. Transmettre l’état au composant parent avec des accessoires
3. Transmettre des données au composant parent à partir de plusieurs composants enfants
4. Conclusion

Une chose qui distingue un grand développeur de la moyenne est sa capacité à écrire des codes propres et bien formatés.

C’est le cerveau derrière la fonction React qui permet à un codeur de stocker des informations et d’effectuer des opérations à l’intérieur d’un composant, puis de laisser un autre composant accéder aux données et les utiliser. C’est la relation entre les composants enfant et parent dans React.

Le composant parent ou le composant d’origine a déjà une opération à traiter. Un codeur qui souhaite effectuer un autre traitement pour remplacer, mettre à jour ou ajouter des données au composant parent crée le composant enfant pour ce faire.

Il existe également des cas où le développeur peut souhaiter transmettre plusieurs données au parent. La création de plusieurs composants enfants est également un moyen idéal de le faire.

Cela rendra le composant parent plus court et plus ordonné, avec moins de code.

Renvoyer les données au composant parent avec une fonction de rappel

La fonction callback est un concept React qui permet d’appeler une fonction une fois que l’opération de cette fonction est traitée. C’est un moyen simple de rappeler la fonction dans le composant enfant au parent.

Nous allons commencer par créer un nouveau projet depuis notre terminal. On tape npx create-react-app illustrationone.

Une fois le projet créé, nous allons dans le dossier de notre éditeur, passons au dossier src et créons un nouveau fichier, Child.js. Nous allons travailler avec les App.js et Child.js dans l’exemple.

Notre App.js servira de composant parent, et nous lancerons la fonction callback comme ceci :

Extrait de code (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

Nous créons d’abord l’état name, puis déclarons la fonction callback qui va récupérer les données correspondant à la variable name du composant Child.js.

Une fois que nous récupérons les données du composant enfant, nous créons une fonction qui renverra les données affectées à la variable name dans le Child.js.

Ensuite, nous passons au Child.js, et ici, nous déclarons l’opération que nous voulons faire.

Extrait de code (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

Production:

Parce que nous voulons retransmettre ces données au parent, nous avons besoin d’une fonction qui lancera la fonction callback à l’intérieur du composant enfant. C’est là que nous avons besoin de l’écouteur d’événement onTrigger.

Une fois que nous avons cliqué sur le bouton Submit et que le résultat est affiché, le onTrigger active immédiatement la fonction callback, ramenant la valeur attribuée à la variable name au composant parent.

Transmettre l’état au composant parent avec des accessoires

Il s’agit d’une méthode plus simple par rapport à l’exemple précédent. Nous utilisons props pour renvoyer le résultat traité au composant parent.

Nous naviguons vers le dossier src et créons un nouveau fichier, User.js. Ce sera notre composant enfant.

Le App.js est notre composant parent, et nous transmettrons ces codes :

Extrait de code (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;

Nous créons une fonction nom qui dicte au framework React que nous voulons qu’il obtienne la date attribuée à la fonction name. Ensuite, nous voulons l’alerter, c’est-à-dire que nous voulons revenir sous la forme d’un pop-up.

Ensuite, nous mettons un peu plus de code dans notre User.js, qui est le composant enfant :

Extrait de code (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;

Production:

Ici, nous attribuons les données à la fonction name, puis une fois que le bouton Click me est enfoncé, il active l’écouteur d’événement onClick, qui renvoie les données au parent en tant qu’accessoires. Gardez à l’esprit que props est l’abréviation de propriétés.

Transmettre des données au composant parent à partir de plusieurs composants enfants

Puisque nous transmettons des données au composant parent à partir de deux composants enfants, nous allons créer un fichier, TodoList.js pour le composant parent et deux fichiers, Todo.js et DeadlineList.js pour les composants enfants.

Le composant parent abritera les codes qui définiront les fonctions pour dériver les données que nous voulons récupérer des composants enfants :

Extrait de code (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;

Ensuite, nous travaillons sur le Todo.js, un formulaire. Une fois que les données ont été saisies et que nous cliquons sur le bouton Add Todo, il renvoie les données :

Extrait de code (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;

Ensuite le DeadlineList.js se charge de restituer la liste au parent sous la forme d’un format de liste :

Extrait de code (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;

Ensuite, nous importons tout à l’intérieur du App.js :

Extrait de code (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;

Production:

Conclusion

Lorsque les développeurs construisent un projet en équipe, l’écriture de shortcodes cohérents par composant permet d’obtenir facilement l’aide de leurs coéquipiers. En revanche, un projet avec des codes obstrués rebutera facilement un autre développeur qui souhaite aider.