Event and hook

Salut

Je suis un tutorial et je bute sur une partie du code.
Dans ce code j'ai compris lorsqu'on rentre une valeur elle change le state puis on l'envoie

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 30 31 32

import React, { useState } from 'react'   const AddUserForm = props => { const initialFormState = { id: null, name: '', username: '' } const [user, setUser] = useState(initialFormState)   const handleInputChange = event => { const { name, value } = event.target   setUser({ ...user, [name]: value }) }   return ( <form onSubmit={event => { event.preventDefault() if (!user.name || !user.username) return   props.addUser(user) setUser(initialFormState) }} > <label>Name</label> <input type="text" name="name" value={user.name} onChange={handleInputChange} /> <label>Username</label> <input type="text" name="username" value={user.username} onChange={handleInputChange} /> <button>Add new user</button> </form> ) }   export default AddUserForm

---

Je bute donc sur un bout de code, en essayant de le comprendre tout seul j'ai du apprendre et comprendre le destructuring et le hook, mais toujours incomprhéensible.

A la ligne 25 on change bien la valeur du state pour le [name], car à la ligne 11 on a :

Code:

---

setUser({ ...user, [name]: value })

---

à la ligne 27 :

Code:

---

<input type="text" name="username" value={user.username} onChange={handleInputChange} />

---

Comment ce fait se que ce input puisse envoyer ça valeur directement dans le user.username alors que :

Code:

---

setUser({ ...user, [name]: value })

---

Ne touche que la valeur du name ?

Merci pour l'aide.

Salut,

dans ce code :

Code:

---

setUser({ ...user, [name]: value })

---

name est entre crochets, on utilise donc la valeur de la variable name comme clé.

Merci.

J'ai fait tourné plusieurs fois ta réponse dans ma tête et j'ai compris ceci avec mes connaissances acquises :

Lorsqu'on tape une lettre, elle va directement dans la value de l'event qui modifie soit la valeur de [user.name] ou [user.username]

Code:

---

1 2	setUser({ ...user, [name]: value })

---

Les deux points ":" veulent dire qu'on renomme le [name]. Là grâce au value de l'event, le [name] devient [user.name] ou [user.username]. Et là le setUser, modifie au final la bonne variable.

J'espère que c'est une bonne logique d'écrite :)