Updating variable through input box using React using State Hook

Question

I'm trying to implement a React script where I update a variable and make it equal to the input but I'm not able to update it. (Input is a 10 digit number )

Here is my script-

const [MeetingIDi, setMeetingIDi] = useState('')
 const handleUserInputChange = (e) =>
      {
        setMeetingIDi(e.target.name);
        fetchTrans()
      };

return <RightWrapper>
        <Header>
          <Button onClick={handleDelete}>Delete Transcription</Button>
          <Button onClick={signOut}>Sign out</Button>
          <input type="text" placeholder="Meeting ID" defaultValue="Hello!" onChange={handleUserInputChange}/>
        </Header>

Answer 1

You need to use the input value attribute if you want an input to change a state varible.

const handleUserInputChange = (e) => {
    setMeetingIDi(e.target.value)
    //...
}

<input type='text'
placeholder='Meeting ID'
value={MeetingIDi}
onChange={handleUserInputChange} />

Answer 2

e.target.name will assign the name of the input field to the state. If you want to assign the value of the input field to the the state then you have to use e.target.value in your function.

const handleUserInputChange = (e) => {
  setMeetingIDi(e.target.value);
  fetchTrans()
}