Discussion :

[fang44z]

Bonjour/bonsoir,

Je me suis très récemment attaqué à l'univers React, et pour ne rien vous cacher je suis complétement largué, entre les props, les hooks, le states ect...
Je suis de ceux qui pensent que la meilleures des défense c'est l'attaque et je me suis donc lancé dans un petit programme pour débuter, et essayer d'assimiler toutes ces nouvelles notions qui sont très floue pour le moment.
J'ai décidé de faire une petite todolist rien de plus basic seulement, petit hic, je n'arrive rien rien du tout. J'ai créer le plus de component possible afin de comprendre tout le potentiel du "useState()". J'aurais très bien pu faire tout autrement et de limiter un maximum les components (voir aucun) et de tout faire sans me prendre la tête seulement j'essayer de comprendre. Alors voici mon problème

J'ai un component qui est la barre d'ajout avec un input pour écrire la tache et un bouton ajout, la zone où il y aura mes taches ajoutées par le composant précédent, et le composant pour former la tache qui est composé du text, d'un bouton suppr, et un bouton éditer. Qui les trois réunis donne vie à mon application.
Seulement je ne comprend pas comment à partir de mon bouton "ajouter" créer un composant de tache et de l'ajouter dans la zone ou il y aura mes listes.

Pour que ce soit un peut moins flou pour vous voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
import { useState } from 'react'
import '../Styles/TextField.css'
 
const [text, setText] = useState('');
// Fonction pour récuperer la value de mon input
const handleChange = event =>{
    setText(event.target.value);
}
 
function TaskAdder (){
    return(
        <div className='text-zone'>
            <label className='input-main'>
                <input type="text" required minLength="2"  placeholder='Add...' onChange={handleChange} value={text}/>
            </label>
            <button className='button-style'>
                <span className="material-symbols-outlined calendare-icon">calendar_month</span>
            </button>
            {/* Ce fameux bouton qui devra créer un component de type "TaskCreator" et lui assigner pour texte la valeur de mon input */}
            <button className='button-style'>
                <span className="material-symbols-outlined calendare-icon">forms_add_on</span>
            </button>
 
        </div>
    )
}
 
export default TaskAdder

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
function TaskCreator(){
    return(
        <div className="task-main">
 
            <span className="material-symbols-outlined radio-button-icon">
                radio_button_unchecked
            </span>
            {/*Changer le texte ci-dessous par une props(jesuppose) */}
            <label className='style-text'>Première tache</label> 
            <span className="button-zone">
                <span class="material-symbols-outlined edit-icone">
                    edit_note
                </span> 
                <span class="material-symbols-outlined delete-icone">
                    delete
                </span>
            </span>
 
        </div>
 
    )
}
 
export default TaskCreator;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
import TaskCreator from "./TaskCreator";
import '../Styles/ListZone.css'
 
 
function ListZone(){
    return (
        <div className="list-zone">
            {/* Recevoir à cet endroit le component de type "TaskCreator" crée via mon boutton dans "TaskAdder.js" */}
        </div>
    )
}
 
export default ListZone;

J'ai mis quelques commentaires aux endroits précis pour expliquer un peux plus mon problème. Je suppose que je m'y prend totalement comme un manche et qu'il y a 100 autres manières de faire beaucoup plus simple. Ou peut être que ma méthode voulu est complétement impossible.
Quoi qu'il en soit merci de vos futurs réponses. Si vous voulez plus de détails n'hésitez pas.

[lamouche42]

Salut,
A première vue, il manque le principal soit la liste des taches à afficher.
Le fait de creer de multiples composant est bien car chaque etat de composant est isolé et evite le render de tous les autres à chaque changement d'etat.

il faut s'imaginer que els composants react sont des interfaces visuelles, elles ne sont rien si on utilise pas de variable pour les remplir

il faut donc imaginer plutot les composants suivants :

• TaskList (affichage des taches)
• Task (à afficher dans la liste)
• TaskCreator (pour creer la tache à ajouter à la liste)

Dans ton composant principal, tu dois creer un state taskList qui contiendra un tableau des tasks à afficher.
ton composant taskCreator devra, lors de la validation de la nouvelle task, la push au state taskList vie une props (setTaskList)
Attention, ne pas utiliser push pour assigner la nouvelle liste avec setTaskList car cette methode ne renvoir rien. il faut utiliser concat (array.concat()).

et à cet endtroit :

{/* Recevoir à cet endroit le component de type "TaskCreator" crée via mon boutton dans "TaskAdder.js" */}

tu fais un map du state taskList, map qui renvoie un tableau de composant task. je te laisse chercher la façon de le générer