React input to change variable value

Question

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

Store the variable in state - look up the useState hook

Abe
– Abe

2022-05-19 17:25:35 +00:00
Commented May 19, 2022 at 17:25 — Abe
– Abe, Commented May 19, 2022 at 17:25

pez · Accepted Answer · 2022-05-19 18:19:32Z

1

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

edited May 19, 2022 at 18:19

answered May 19, 2022 at 17:31

pez

4,33714 gold badges44 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user8112228 Over a year ago

I'm not able to input anything with the change now

David Scholz Over a year ago

What happens if you exchange e.target.name with e.target.value?

Leonardo · Accepted Answer · 2022-05-19 18:13:36Z

0

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>

answered May 19, 2022 at 18:13

Leonardo

1234 silver badges15 bronze badges

Collectives™ on Stack Overflow

React input to change variable value

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related