{"id":6012,"date":"2024-11-04T12:56:02","date_gmt":"2024-11-04T12:56:02","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/gerer-suppression-to-do-list-react\/"},"modified":"2024-11-07T17:28:14","modified_gmt":"2024-11-07T17:28:14","slug":"gerer-suppression-to-do-list-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/gerer-suppression-to-do-list-react\/","title":{"rendered":"9.6 G\u00e9rer la Suppression dans une TO-DO List en React"},"content":{"rendered":"\n\n\n<p><strong>Suppression TO-DO List React<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur front-end. Ma\u00eetriser cette fonctionnalit\u00e9 permettra non seulement d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur mais aussi de garder votre <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">application React<\/a> bien organis\u00e9e et fonctionnelle. Dans cet article, nous allons explorer comment mettre en \u0153uvre cette fonctionnalit\u00e9 gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Suppression dans une TO-DO List avec React<\/strong><\/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\/706103386?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>Les TO-DO lists sont une application classique pour apprendre les bases de React. Elles permettent de g\u00e9rer des t\u00e2ches simples comme l&rsquo;ajout, l&rsquo;\u00e9dition, et la suppression de t\u00e2ches. La suppression de t\u00e2ches est critique pour maintenir une liste propre et \u00e0 jour, facilitant ainsi la gestion des priorit\u00e9s par les utilisateurs. D\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/utilisation-classes-javascript-react\" target=\"_blank\" rel=\"noopener\">utiliser les classes en JavaScript<\/a> pour mieux architecturer votre code React.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er une TO-DO List Basique en React<\/h3>\n\n\n\n<p>Avant d&rsquo;impl\u00e9menter la suppression, commen\u00e7ons par cr\u00e9er une structure de base pour une TO-DO list en React. Nous utiliserons des composants fonctionnels et les hooks d&rsquo;\u00e9tat pour g\u00e9rer nos t\u00e2ches.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction TodoList() {\n  const &#91;todos, setTodos] = useState(&#91;]);\n  const &#91;task, setTask] = useState('');\n\n  const addTask = () =&gt; {\n    setTodos(&#91;...todos, { id: Date.now(), text: task }]);\n    setTask('');\n  };\n\n  return (\n    <div>\n      <input type=\"text\" value=\"{task}\" onchange=\"{(e)\" ==\"\"> setTask(e.target.value)} \n        placeholder=\"Nouvelle t\u00e2che\" \n      \/&gt;\n      <button onclick=\"{addTask}\">Ajouter<\/button>\n\n      <ul>\n        {todos.map(todo =&gt; (\n          <li key=\"{todo.id}\">\n            {todo.text}\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Impl\u00e9menter la Suppression de T\u00e2ches<\/h3>\n\n\n\n<p>Maintenant que nous avons notre TO-DO list de base, il est temps d&rsquo;ajouter la fonctionnalit\u00e9 de suppression. Nous allons modifier chaque t\u00e2che pour inclure un bouton de suppression, et ajuster l&rsquo;\u00e9tat de notre composant en cons\u00e9quence. Pour aller plus loin sur l&rsquo;interaction avec l&rsquo;utilisateur, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/changer-state-avec-evenements-react\" target=\"_blank\" rel=\"noopener\">comment changer l&rsquo;\u00e9tat avec les \u00e9v\u00e9nements React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function TodoList() {\n  const &#91;todos, setTodos] = useState(&#91;]);\n  const &#91;task, setTask] = useState('');\n\n  const addTask = () =&gt; {\n    setTodos(&#91;...todos, { id: Date.now(), text: task }]);\n    setTask('');\n  };\n\n  const deleteTask = (id) =&gt; {\n    setTodos(todos.filter(todo =&gt; todo.id !== id));\n  };\n\n  return (\n    <div>\n      <input type=\"text\" value=\"{task}\" onchange=\"{(e)\" ==\"\"> setTask(e.target.value)} \n        placeholder=\"Nouvelle t\u00e2che\" \n      \/&gt;\n      <button onclick=\"{addTask}\">Ajouter<\/button>\n\n      <ul>\n        {todos.map(todo =&gt; (\n          <li key=\"{todo.id}\">\n            {todo.text} \n            <button onclick=\"{()\" ==\"\"> deleteTask(todo.id)}&gt;Supprimer<\/button>\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser et Tester la Fonctionnalit\u00e9<\/h3>\n\n\n\n<p>Avant de d\u00e9ployer votre application, assurez-vous que la fonctionnalit\u00e9 de suppression fonctionne comme pr\u00e9vu. Testez-la en ajoutant et en supprimant plusieurs t\u00e2ches pour garantir que l&rsquo;\u00e9tat se met \u00e0 jour correctement. Pour bien ma\u00eetriser les \u00e9tapes de d\u00e9veloppement d&rsquo;une application React compl\u00e8te, vous pouvez explorer notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel sur la cr\u00e9ation d&rsquo;une premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<p>Il est \u00e9galement bon de nettoyer le code en supprimant les t\u00e2ches imm\u00e9diatement apr\u00e8s les avoir supprim\u00e9es. Cela peut inclure la mise en place d&rsquo;une fonctionnalit\u00e9 pour avertir l&rsquo;utilisateur avant la suppression, ou l&rsquo;ajout d&rsquo;une animation pour am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. Pour approfondir vos connaissances, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/eviter-actualisation-inutile-composant-react\" target=\"_blank\" rel=\"noopener\">comment \u00e9viter l&rsquo;actualisation inutile des composants React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction TodoList() {\n  const &#91;todos, setTodos] = useState(&#91;]);\n  const &#91;task, setTask] = useState('');\n\n  const addTask = () =&gt; {\n    if (task.trim()) {\n      setTodos(&#91;...todos, { id: Date.now(), text: task }]);\n      setTask('');\n    }\n  };\n\n  const deleteTask = (id) =&gt; {\n    if (window.confirm(\"\u00cates-vous s\u00fbr de vouloir supprimer cette t\u00e2che ?\")) {\n      setTodos(todos.filter(todo =&gt; todo.id !== id));\n    }\n  };\n\n  return (\n    <div>\n      <input type=\"text\" value=\"{task}\" onchange=\"{(e)\" ==\"\"> setTask(e.target.value)} \n        placeholder=\"Nouvelle t\u00e2che\" \n      \/&gt;\n      <button onclick=\"{addTask}\">Ajouter<\/button>\n\n      <ul>\n        {todos.map(todo =&gt; (\n          <li key=\"{todo.id}\">\n            {todo.text} \n            <button onclick=\"{()\" ==\"\"> deleteTask(todo.id)}&gt;Supprimer<\/button>\n          <\/li>\n        ))}\n      <\/ul>\n    <\/div>\n  );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion: Suppression TO-DO List React<\/h2>\n\n\n\n<p>Nous avons vu comment ajouter une fonctionnalit\u00e9 de suppression \u00e0 une TO-DO list en React. Cette comp\u00e9tence est essentielle pour am\u00e9liorer l&rsquo;interaction utilisateur et maintenir une application propre et efficace. Continuez \u00e0 explorer d&rsquo;autres fonctionnalit\u00e9s comme l&rsquo;\u00e9dition de t\u00e2ches ou la gestion par cat\u00e9gories pour enrichir vos connaissances en React. Pour des \u00e9tapes plus avanc\u00e9es, ne manquez pas notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-cycle-vie-application-react\" target=\"_blank\" rel=\"noopener\">le cycle de vie des applications React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/reactjs.org\/tutorial\/tutorial.html\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/reactjs.org\/logo-og.png\" loading=\"lazy\" alt=\"React Official\" width=\"200\" title=\"\"><\/a>\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=\"Learnify Formation\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Suppression TO-DO List React est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur front-end. Ma\u00eetriser cette fonctionnalit\u00e9 permettra non seulement d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur mais aussi de garder&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3215,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6012","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\/6012","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=6012"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6012\/revisions"}],"predecessor-version":[{"id":6015,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6012\/revisions\/6015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3215"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}