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
// 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>
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>