Inputs not updating state in functional react component-CodePudding

I looked around and I see similar questions, but whenever I follow the answers I can't seem to get this to work in the way that I have it written. I am starting off all four states as blank inside of an array, but I want to update the states as the user types for each input field. Why is setChanging not working to update the state for the particular name of the input field? Console logs both the x and y values as I type into each input. I must be doing something simple wrong, but I can't figure out what it is.

const ContactForm = () => {

  const initialValues = {
    recipientName: "",
    recipientEmail: "",
    fromName: "",
    fromEmail: "",
  };
  const [changing, setChanging] = useState(initialValues);


  const handleInputChange = (e) => {
    let x = e.target.name;
    let y = e.target.value;
    console.log(x);
    console.log(y);
    setChanging({...changing, [e.target.name]: e.target.value});
    console.log(initialValues);
  }



return (
  <Form>
    <Form.Group className="mb-3">
      <Row>
        <Col>
          <Form.Control
            type="text"
            required
            name="recipientName"
            placeholder="Recipient Name*"
            id="form.recipientName"
            onChange={handleInputChange}
          />
        </Col>
        <Col>
          <Form.Control
            type="email"
            required
            name="recipientEmail"
            placeholder="Recipient Email*"
            id="form.recipientEmail"
            onChange={handleInputChange}
          />
        </Col>
      </Row>
    </Form.Group>
    <Form.Group className="mb-3">
      <Row>
        <Col>
          <Form.Control
            type="text"
            required
            name="fromName"
            placeholder="From Name*"
            aria-invalid="form.fromName"
            onChange={handleInputChange}
          />
        </Col>
        <Col>
          <Form.Control
            type="email"
            required
            name="fromEmail"
            placeholder="From Email*"
            id="form.fromEmail"
            onChange={handleInputChange}
          />
        </Col>
      </Row>
    </Form.Group>
    <Button variant="primary"  type="submit">
      Submit
    </Button>
  </Form>
);

}

export default ContactForm

CodePudding user response：

You're logging the initialValues:

console.log(initialValues);

So you're always seeing the value of initialValues, which never changes. Nowhere are you observing state.

You can respond to state updates and log the updated state with useEffect for example:

useEffect(() => console.log(changing), [changing]);

This would log the value of changing any time that value changes.

You'd also observe updates to state in the UI if/when your UI uses state to render output. (Currently it does not.)

CodePudding user response：

There are some things I suggest you to change:

<Form.Control
  type="text"
  required
  name="fromName"
  placeholder="From Name*"
  aria-invalid="form.fromName"
  onChange={handleInputChange}
/>

I'm not sure if those components belong to a framework like MaterialUI but would be better to have an attribute called value where you pass the state to handle a controlled component instead of an uncontrolled component:

<Form.Control
  type="text"
  required
  name="fromName"
  placeholder="From Name*"
  aria-invalid="form.fromName"
  onChange={handleInputChange}
  value={changing.fromName} // Add this attribute
/>

Also, would be better if your initialState is outside of the function.

  console.log(initialValues);

You should print the state instead of the initialValues, what you are updating is the state, not the initialValues.

  setChanging({...changing, [e.target.name]: e.target.value});

CodePudding user response：

this is because you didn't specify value attribute on your inputs. in addition to this to see the changes on user type you must console.log the state (which is change here) not the initialValues.

example:

<Form.Control
    type="text"
    required
    name="recipientName"
    placeholder="Recipient Name*"
    id="form.recipientName"
    value={changing.fromName}
    onChange={handleInputChange}
/>