Stocker des Données avec le State en React est une compétence essentielle pour tout développeur travaillant avec cette bibliothèque JavaScript. Le State permet de rendre les composants React interactifs et dynamiques en stockant et en gérant les données locales de façon efficace. Dans ce tutoriel, nous allons explorer comment utiliser le State pour gérer les données dans les composants React, avec des exemples concrets de code.

Introduction au State en React

Stocker le State en React est un moyen de gérer les données spécifiques à un composant et permettre à ce composant de réagir dynamiquement aux changements de ces données. Le State est initialisé dans le constructeur d’un composant de classe avec this.state ou via le hook useState dans un composant fonctionnel.

Initialiser le State en React

Pour initialiser le State dans un composant de classe, nous utilisons le constructeur. Voila un exemple simple :

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}

      

    );
  }
}

export default App;

Utiliser le State avec les Composants Fonctionnels

Avec les composants fonctionnels et les hooks, nous pouvons utiliser useState pour gérer le State. Voici comment faire :

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}

    

  );
}

export default App;

Mettre à Jour le State

Mettre à jour le State en React ne doit jamais être fait directement. Utilisez plutôt this.setState dans les composants de classe ou la fonction de mise à jour fournie par useState dans les composants fonctionnels. Voici comment mettre à jour le State :

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      

        
Count: {this.state.count}

        
      

    );
  }
}

export default App;

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}

      
    

  );
}

export default App;

Utiliser le State pour Gérer des Formulaires

Les formulaires sont une des utilisations les plus courantes du State. Voici comment gérer un formulaire simple en utilisant le State dans un composant fonctionnel :

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Le nom soumis est: ${name}`);
  };

  return (
    

      

        
        
      

    

  );
}

export default App;

Utiliser le State pour Afficher une Liste d’Éléments

Le State est également utile pour gérer et afficher des listes d’éléments. Voici un exemple d’affichage d’une liste d’éléments gérée par le State :

import React, { useState } from 'react';

function App() {
  const [items, setItems] = useState(['Pomme', 'Banane', 'Orange']);

  const addItem = () => {
    setItems([...items, 'Nouvel Élément']);
  };

  return (
    

      
Liste des Fruits

      
    
        {items.map((item, index) => (
          
  • {item}
    • 
        ))}
      

      
    

  );
}

export default App;

Gestion du State dans des Composants Complexes

Dans des applications React plus complexes, il peut être nécessaire de gérer plusieurs états au sein d’un même composant. Voici comment gérer plusieurs éléments de State :

import React, { useState } from 'react';

function App() {
  const [form, setForm] = useState({ name: '', age: '' });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setForm({ ...form, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Nom: ${form.name}, Âge: ${form.age}`);
  };

  return (
    

      

        
        

        
        
      

    

  );
}

export default App;

Utiliser le State avec les Effets de Bord

Avec les composants fonctionnels, vous pouvez combiner useState avec useEffect pour gérer les effets de bord comme les appels API. Voici un exemple :

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return 
Chargement...
;
  }

  return (
    

      
Données de l'API

      
    
        {data.map((item, index) => (
          
  • {item.name}
    • 
        ))}
      

    

  );
}

export default App;

Conclusion

L’utilisation du State en React est cruciale pour gérer les données et rendre vos composants dynamiques et interactifs. Le State permet de contrôler l’affichage en fonction des données et de réagir aux interactions des utilisateurs. Avec les hooks comme useState et useEffect, gérer le State dans les composants fonctionnels devient très fluide et intuitif. Nous espérons que ce tutoriel vous a aidé à mieux comprendre comment utiliser le State en React.

Learn React - Special Offer

Si cet article vous a intéressé, vous pourriez aussi apprécier découvrir d’autres aspects de React comme Qu’est-ce que React : Introduction et avantages, en comprendre les différences entre les Composants par Classe et Fonctionnels, ou apprendre à Créer votre Première Application React. Pour une gestion plus avancée, vous pouvez aussi voir comment Gérer les Erreurs et Requêtes avec Firebase et Axios ou encore Modifier le Style en utilisant JavaScript avec React.

Categorized in:

React et Redux,

Tagged in: