Not getting any console.log data from first name field box

Question

    import React, { useState } from "react";
import "../styles.css";

const FormBox = () => {
  const [value, setValue] = useState({
    fName: "",
    lName: "",
  });

  const [textArea, setTextArea] = useState("");

  const handleSumbit = (e) => {
    e.preventDefault();
    console.log(value);
    console.log(textArea);
  };

  return (
    <div className="center">
      <form onSubmit={handleSumbit}>
        <div>
          {/*This is how to set a control form box */}

          <input
            placeholder="First Name"
            type="text"
            value={value.fName}
            onChange={(e) => setValue(e.target.value)}
          />
        </div>
        <div>
          {/*This is how to set a control form box */}

          <input
            placeholder="Last Name"
            type="text"
            value={value.lName}
            onChange={(e) => setValue(e.target.value)}
          />
        </div>

        <div>
          <textarea
            value={textArea}
            onChange={(e) => setTextArea(e.target.value)}
          ></textarea>
          <div>
            <input type="submit" />
          </div>
        </div>
      </form>
    </div>
  );
};

export default FormBox;

I'm working on a basic React project and I'm currently getting the message "Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components input"

Another problem is that I'm not getting any info when typing in first name field box. I do get back last name and textarea.

Thank you so much and happy holiday

Francisco Aguirre · Accepted Answer · 2021-12-26T16:27:43.217

You are having two issues:

Not getting info from the first name field
The uncontrolled vs controlled warning

Issue 1.

This actually happens because on both the first name and last name inputs you are doing setValue(e.target.value). setValue() sets the object that is originally initialized as { fName: '', lName: '' }. This means that even though the value is an object at first, when writing on any of the fields, it will become a simple string, either the first or last name.

This problem does not happen with the text area, since you keep track of its value on a separate state, textArea. That's one way to fix your issue, hold both fName and lName on separate useState calls. Another way is to replace the old value object with a new one that works as expected, for example:

  <input
    placeholder="First Name"
    type="text"
    value={value.fName}
    onChange={(e) => setValue({ ...value, fName: e.target.value })}
  />

I would also suggest avoiding abbreviations whenever possible. You could've used firstName and lastName instead as variable names. It really goes a long way improving readability.

Issue 2.

This warning is a side effect of the first issue. It appears because you are using controlled inputs but when writing on one of them the object is turned into a string and both value.fName and value.lName are undefined. Controlled inputs are not supposed to have undefined as a value, since that's usually an indicator that you want to use uncontrolled inputs. The empty value should be an empty string, which was intended and will be fixed if you fix the first issue.

There's another stack overflow sharing the differences between controlled and uncontrolled components: What are React controlled components and uncontrolled components?

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component".

A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

The important bit to note here is that an uncontrolled component doesn't receive a value prop and hence its value is undefined.

Not getting any console.log data from first name field box

1 Answers1