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 js : 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
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 js : Sélectionner tout - Visualiser dans une fenêtre à part
  setUser({ ...user, [name]: value })

à la ligne 27 :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
 <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 js : Sélectionner tout - Visualiser dans une fenêtre à part
  setUser({ ...user, [name]: value })

Ne touche que la valeur du name ?

Merci pour l'aide.