CODEWITHSUNDEEP
javascriptreactjs
CodeZoe
CodeZoe

Reputation: 13

react useState hook variable value don't update on input onChange event

react useState hook won't update on input onChange event using react functional component

const [email, setEmail] = useState("");
// i'm not able to set input value in useeffect using this code
<GridItem xs={12} sm={12} md={4}>
  <CustomInput
    labelText="Email address"
    id="email-address"
    formControlProps={{
      fullWidth: true
    }}

    value={email}
    onChange={evt => setEmail(evt.target.value)}
  />
</GridItem>

Upvotes: 0

Views: 4101

Answers (3)

Ankit Abhinav
Ankit Abhinav

Reputation: 49

const [email, setEmail] = useState(null);
const handleChange = (e) => {
  setEmail(e.target.value);
}
// i'm not able to set input value in useeffect using this code
<GridItem xs={12} sm={12} md={4}>
  <CustomInput
    labelText="Email address"
    id="email-address"
    formControlProps={{
      fullWidth: true
    }}

    value={email}
    onChange={handleChange}
  />
</GridItem>

Upvotes: 0

akhtarvahid
akhtarvahid

Reputation: 9769

App.js

function App() {
  const [email, setEmail] = React.useState("");
  const handleChange = e => {
    setEmail(e.target.value);
  };
  return (
    <div>
      <h4>{email}</h4>
      <CustomInput handleChange={handleChange} />
    </div>
  );
}

CustomInput.js

import React from "react";

function CustomInput(props) {
  return (
    <div>
      <input type="text" onChange={props.handleChange} />
    </div>
  );
}

export default CustomInput;

Upvotes: 1

tim
tim

Reputation: 727

Where is your function? 

onChange={e => this.setEmail(e)} // use arrow function to bind this

setEmail = (e) => {
  yourSetFunction({[e.target.name]:e.target.value}) // assuming you give you input a name
}

Upvotes: 0

Related Questions