I am writing a script where I have to change a variable value same as the input. This is my script. It should change whenever the input is changed -

    const handleUserInputChange = (e) => {
      MeetingIDi = 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" value={MeetingIDi} onChange={handleUserInputChange}/>
        </Header>

The value is not changing on input somehow

CodePudding user response：

// Initialize MeetingIDi with a value of '' (use whatever you want)
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" value={MeetingIDi} onChange={handleUserInputChange}/>
        </Header>

Using the state hook

CodePudding user response：

you can try to create a react useState hook to store the values in it and when the input is changing set the 'setValue' to the target value. Like the code below:

    const[value,setValue]= useState('');

return <RightWrapper>
        <Header>
          <Button onClick={handleDelete}>Delete Transcription</Button>
          <Button onClick={signOut}>Sign out</Button>
          <input type="text" placeholder="Meeting ID" value={value} onChange={(e)=>setValue(e.target.value)}
        </Header>