Facing a problem while Handle an input with React hooks

Question

I try to handle the user's text input with hooks.

 const [inputValues, setInputValues] = useState({
firstName:"",
lastName:"",
email:"",
telNum:"",
contactType:"Tel.",
message:"",
agree:false

});

and I try to update the values by

  const handleChange = event => {
setInputValues({ ...inputValues, [event.target.name]: event.target.value,});
}

and the event:

onChange={handleChange}

Sample input Field code:

    <FormGroup row>
          <Label htmlFor='firstname' md={2}>
            First Name
          </Label>
          <Col md={10}>
            <Input
              type='text'
              id='firstname'
              name='firstname'
              placeholder='First Name'
              value={firstName}
              valid={errors.firstName === ""}
              invalid={errors.firstName !== ""}
              onBlur={handleBlur("firstName")}
              onChange={handleChange}             />
            <FormFeedback>{errors.firstName}</FormFeedback>
          </Col>
        </FormGroup>

But whenever I typed something in the input field. I Can't find the value that I entered un the input field. I didn't understand what happened here. Please Help me to get out from this

deepak · Accepted Answer · 2020-11-20 08:13:51Z

2

There is a typo error in your code. name property is firstName not firstname.

<FormGroup row>
          <Label htmlFor='firstname' md={2}>
            First Name
          </Label>
          <Col md={10}>
            <Input
              type='text'
              id='firstname'
              name='firstName'
              placeholder='First Name'
              value={inputValues.firstName}
              valid={errors.firstName === ""}
              invalid={errors.firstName !== ""}
              onBlur={handleBlur("firstName")}
              onChange={handleChange}             />
            <FormFeedback>{errors.firstName}</FormFeedback>
          </Col>
        </FormGroup>

answered Nov 20, 2020 at 8:13

deepak

1,3851 gold badge8 silver badges12 bronze badges

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

Comments

Jaymin Patel · Accepted Answer · 2020-11-20 06:11:42Z

0

replace value to value={inputValues. firstName}

answered Nov 20, 2020 at 6:11

Jaymin Patel

113 bronze badges

Collectives™ on Stack Overflow

Facing a problem while Handle an input with React hooks

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related