Discussion :

[Mar54]

Bonjour à tous,

En tant que débutant, j'essaye d'afficher un texte que j'ai obtenu dans la Console après avoir validé un formulaire , le texte est contenu dans un tableau d'objets.


Voici le formulaire que je valide avec le bouton ADD TASK


Après avoir submit avec le bouton ADD TASK, ce tableau d'objets est affiché dans ma console.
Mon but est d'afficher les textes "This is the title" et "This is the description" dans deux endroits distincts de la page.

Une idée sur comment je dois faire ?

Voici le code du composant:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
function Popup(props) {
 
    const [inputFields, setInputField] = useState([
        { title: '', 
          description:''
        },
      ]);
 
      const [print, setPrint] = useState(false)
 
      const handleChangeInput = (index, event) => {
        const values = [...inputFields];
        values[index][event.target.name] = event.target.value;
        setInputField(values);
 
      }  
 
      const handleSubmit = (e) => {
        e.preventDefault();
        console.log(inputFields);
 
      }
 
    return (props.trigger) ? (
        <Wrapper>
            <div className="popup">
                <div className="popup-inner">
                    <button className="close-btn" onClick={() => props.setTrigger(false)}>close</button>
                    { props.children }
                    <form onSubmit={handleSubmit}>
            { inputFields.map((inputField, index) =>(
                <div key={index} className="containerfield">
                  <TextField
                    name="title"
                    label="Title"
                    className= "txtfield"
                    value={inputField.title}
                    onChange={event => handleChangeInput(index, event)}
                  />
 
                  <TextField
                    name="description"
                    label="Description"
                    className= "txtfield2"
                    value={inputField.description}
                    onChange={event => handleChangeInput(index, event)}
                  />
                </div>             
          )) }
              <button className="submit-btn" type="submit" onClick={handleSubmit}>
                ADD TASK
              </button>
            </form>
 
                </div>
            </div>
        </Wrapper>
    ) : "";
}

Merci de votre aide.