{"id":5924,"date":"2024-09-11T06:14:21","date_gmt":"2024-09-11T06:14:21","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/stocker-donnees-avec-state-react\/"},"modified":"2024-09-11T06:14:25","modified_gmt":"2024-09-11T06:14:25","slug":"stocker-donnees-avec-state-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/stocker-donnees-avec-state-react\/","title":{"rendered":"3.7 Stocker des Donn\u00e9es avec le State en React"},"content":{"rendered":"\n<p><strong>Stocker des Donn\u00e9es avec le State en React<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur travaillant avec cette biblioth\u00e8que JavaScript. Le State permet de rendre les composants React interactifs et dynamiques en stockant et en g\u00e9rant les donn\u00e9es locales de fa\u00e7on efficace. Dans ce tutoriel, nous allons explorer comment utiliser le State pour g\u00e9rer les donn\u00e9es dans les composants React, avec des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au State en React<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706056444?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p> Stocker le State en React est un moyen de g\u00e9rer les donn\u00e9es sp\u00e9cifiques \u00e0 un composant et permettre \u00e0 ce composant de r\u00e9agir dynamiquement aux changements de ces donn\u00e9es. Le State est initialis\u00e9 dans le constructeur d&rsquo;un composant de classe avec <code>this.state<\/code> ou via le hook <code>useState<\/code> dans un composant fonctionnel. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Initialiser le State en React<\/h3>\n\n\n\n<p>Pour initialiser le State dans un composant de classe, nous utilisons le constructeur. Voila un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { Component } from 'react';\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n    };\n  }\n\n  render() {\n    return (\n      <div>\n        <h1>Count: {this.state.count}<\/h1>\n      <\/div>\n    );\n  }\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le State avec les Composants Fonctionnels<\/h3>\n\n\n\n<p>Avec les composants fonctionnels et les hooks, nous pouvons utiliser <code>useState<\/code> pour g\u00e9rer le State. Voici comment faire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction App() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <h1>Count: {count}<\/h1>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre \u00e0 Jour le State<\/h3>\n\n\n\n<p>Mettre \u00e0 jour le State en React ne doit jamais \u00eatre fait directement. Utilisez plut\u00f4t <code>this.setState<\/code> dans les composants de classe ou la fonction de mise \u00e0 jour fournie par <code>useState<\/code> dans les composants fonctionnels. Voici comment mettre \u00e0 jour le State :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { Component } from 'react';\n\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n    };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  };\n\n  render() {\n    return (\n      <div>\n        <h1>Count: {this.state.count}<\/h1>\n        <button onClick={this.increment}>Increment<\/button>\n      <\/div>\n    );\n  }\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction App() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <h1>Count: {count}<\/h1>\n      <button onClick={() => setCount(count + 1)}>Increment<\/button>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le State pour G\u00e9rer des Formulaires<\/h3>\n\n\n\n<p>Les formulaires sont une des utilisations les plus courantes du State. Voici comment g\u00e9rer un formulaire simple en utilisant le State dans un composant fonctionnel :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction App() {\n  const [name, setName] = useState('');\n\n  const handleChange = (event) => {\n    setName(event.target.value);\n  };\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    alert(`Le nom soumis est: ${name}`);\n  };\n\n  return (\n    <div>\n      <form onSubmit={handleSubmit}>\n        <label>\n          Nom:\n          <input type=\"text\" value={name} onChange={handleChange} \/>\n        <\/label>\n        <button type=\"submit\">Envoyer<\/button>\n      <\/form>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n<!-- Ajoutant du contenu additionnel pour atteindre la longueur requise -->\n\n\n<h3 class=\"wp-block-heading\">Utiliser le State pour Afficher une Liste d&rsquo;\u00c9l\u00e9ments<\/h3>\n\n\n\n<p>Le State est \u00e9galement utile pour g\u00e9rer et afficher des listes d&rsquo;\u00e9l\u00e9ments. Voici un exemple d&rsquo;affichage d&rsquo;une liste d&rsquo;\u00e9l\u00e9ments g\u00e9r\u00e9e par le State :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction App() {\n  const [items, setItems] = useState(['Pomme', 'Banane', 'Orange']);\n\n  const addItem = () => {\n    setItems([...items, 'Nouvel \u00c9l\u00e9ment']);\n  };\n\n  return (\n    <div>\n      <h1>Liste des Fruits<\/h1>\n      <ul>\n        {items.map((item, index) => (\n          <li key={index}>{item}<\/li>\n        ))}\n      <\/ul>\n      <button onClick={addItem}>Ajouter un \u00c9lement<\/button>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion du State dans des Composants Complexes<\/h3>\n\n\n\n<p>Dans des applications React plus complexes, il peut \u00eatre n\u00e9cessaire de g\u00e9rer plusieurs \u00e9tats au sein d&rsquo;un m\u00eame composant. Voici comment g\u00e9rer plusieurs \u00e9l\u00e9ments de State :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction App() {\n  const [form, setForm] = useState({ name: '', age: '' });\n\n  const handleChange = (event) => {\n    const { name, value } = event.target;\n    setForm({ ...form, [name]: value });\n  };\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    alert(`Nom: ${form.name}, \u00c2ge: ${form.age}`);\n  };\n\n  return (\n    <div>\n      <form onSubmit={handleSubmit}>\n        <label>\n          Nom:\n          <input type=\"text\" name=\"name\" value={form.name} onChange={handleChange} \/>\n        <\/label>\n        <br \/>\n        <label>\n          \u00c2ge:\n          <input type=\"text\" name=\"age\" value={form.age} onChange={handleChange} \/>\n        <\/label>\n        <button type=\"submit\">Envoyer<\/button>\n      <\/form>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le State avec les Effets de Bord<\/h3>\n\n\n\n<p>Avec les composants fonctionnels, vous pouvez combiner <code>useState<\/code> avec <code>useEffect<\/code> pour g\u00e9rer les effets de bord comme les appels API. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\n\nfunction App() {\n  const [data, setData] = useState([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    fetch('https:\/\/api.example.com\/data')\n      .then((response) => response.json())\n      .then((data) => {\n        setData(data);\n        setLoading(false);\n      });\n  }, []);\n\n  if (loading) {\n    return <div>Chargement...<\/div>;\n  }\n\n  return (\n    <div>\n      <h1>Donn\u00e9es de l'API<\/h1>\n      <ul>\n        {data.map((item, index) => (\n          <li key={index}>{item.name}<\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;utilisation du State en React est cruciale pour g\u00e9rer les donn\u00e9es et rendre vos composants dynamiques et interactifs. Le State permet de contr\u00f4ler l&rsquo;affichage en fonction des donn\u00e9es et de r\u00e9agir aux interactions des utilisateurs. Avec les hooks comme <code>useState<\/code> et <code>useEffect<\/code>, g\u00e9rer le State dans les composants fonctionnels devient tr\u00e8s fluide et intuitif. Nous esp\u00e9rons que ce tutoriel vous a aid\u00e9 \u00e0 mieux comprendre comment utiliser le State en React.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learn React - Special Offer\" title=\"\"><\/a>\n\n\n<!-- Ajout de liens internes -->\n\n<p> Si cet article vous a int\u00e9ress\u00e9, vous pourriez aussi appr\u00e9cier d\u00e9couvrir d&rsquo;autres aspects de React comme <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que React : Introduction et avantages<\/a>, en comprendre les diff\u00e9rences entre les <a href=\"https:\/\/wikiform.fr\/codespace\/components-class-function-react-differences\" target=\"_blank\" rel=\"noopener\">Composants par Classe et Fonctionnels<\/a>, ou apprendre \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">Cr\u00e9er votre Premi\u00e8re Application React<\/a>. Pour une gestion plus avanc\u00e9e, vous pouvez aussi voir comment <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-erreurs-requetes-firebase-axios-react\" target=\"_blank\" rel=\"noopener\">G\u00e9rer les Erreurs et Requ\u00eates avec Firebase et Axios<\/a> ou encore <a href=\"https:\/\/wikiform.fr\/codespace\/modifier-style-utilisant-javascript-react\" target=\"_blank\" rel=\"noopener\">Modifier le Style en utilisant JavaScript avec React<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stocker des Donn\u00e9es avec le State en React est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur travaillant avec cette biblioth\u00e8que JavaScript. Le State permet de rendre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3270,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5924","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5924"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5924\/revisions"}],"predecessor-version":[{"id":5925,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5924\/revisions\/5925"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3270"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}