Créer un composant dans un autre composant
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:
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:
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:
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.
