How to write inside input after making it editable?

Question

I Am populating values of my input field from JSON data what am getting from back-end, now there is an edit button on UI by on click on that button I am enabling my input field but not able to type inside as I am setting some value

I want to write inside the input once I have made them editable.

const { register, handleSubmit, errors } = useForm();
  const [disabled, setdisabled] = useState(false);
  const [editBtn, seteditBtn] = useState(true);
     <form onSubmit={handleSubmit(onSubmit)}>
        {editBtn === true && (
          <div align="right">
            <button
              className="btn white_color_btn"
              type="button"
              onClick={edit}
            >
              Edit
            </button>
          </div>
        )}
        {editBtn === false && (
          <button className="btn white_color_btn" type="submit">
            Save
          </button>
        )}

        <div className="row">
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              disable
              id="firstName"
              name="firstName"
              value={dataItems.firstname}
              disabled={disabled ? "" : "disabled"}
              ref={register({ required: true })}
            />
            {errors.firstname && (
              <span className="text-danger">first name required</span>
            )}
            <br />
            <label htmlFor="emp_designation">First name</label>
          </div>
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              disabled
              id="lastname"
              name="lastname"
              value={dataItems.lastname}
              disabled={disabled ? "" : "disabled"}
              ref={register({ required: true })}
            />
            {errors.lastname && (
              <span className="text-danger">last name required</span>
            )}
            <br />
            <label htmlFor="lastname">Lastname</label>
          </div>
        </div>
      </form>

On click of edit

    const edit = () => {
    setdisabled(true);
  };

Code sandbox

Answer 1

In order to make the input editable, you need to update a local state which controlls the input value. As suggested by you in the comments, you are using graphql to get the data, you can make use of useEffect to set the data in state and then on click of edit, update the localState

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const [disabled, setdisabled] = useState(true);
  const [editBtn, seteditBtn] = useState(true);
  const { loading, data } = useQuery("some qraphql query here"); // getting data from graphql
  const [formData, setFormData] = useState({});

  useEffect(() => {
    setFormData(data);
  }, [data]);

  const edit = () => {
    setdisabled(false);
    seteditBtn(false);
  };

  const onSubmit = () => {
    console.log(formData);
    // submit data using formData state.
  };

  const handleChange = e => {
    const name = e.target.name;
    const value = e.target.value;
    console.log(name, value);
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <div className="container-fluid">
      <form onSubmit={handleSubmit(onSubmit)}>
        {editBtn === true && (
          <div align="right">
            <button
              className="btn white_color_btn"
              type="button"
              onClick={edit}
            >
              Edit
            </button>
          </div>
        )}
        {editBtn === false && (
          <button className="btn white_color_btn" type="submit">
            Save
          </button>
        )}

        <div className="row">
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              id="firstname"
              name="firstname"
              onChange={handleChange}
              value={formData.firstname}
              disabled={disabled}
              ref={register({ required: true })}
            />
            {errors.firstname && (
              <span className="text-danger">first name required</span>
            )}
            <br />
            <label htmlFor="emp_designation">First name</label>
          </div>
          <div className="form-group col-6 col-sm-6 col-md-6 col-lg-4 col-xl-4">
            <input
              type="text"
              id="lastname"
              name="lastname"
              value={formData.lastname}
              onChange={handleChange}
              disabled={disabled}
              ref={register({ required: true })}
            />
            {errors.lastname && (
              <span className="text-danger">last name required</span>
            )}
            <br />
            <label htmlFor="lastname">Lastname</label>
          </div>
        </div>
      </form>
    </div>
  );
}

Working mock demo

Answer 2

Your input is controlled by the value you are giving to it. ie: Its value is always for example empData.item.name.

And you are not providing a change handler to handle the change.

Try adding something like this:

function myChangeHandler(e){
  setEditedValueSomeHow(e.target.value);
}

<input
  // ...
  onChange={myChangeHandler}
/>

Read more about uncontrolled components

PS: you should have had a warning message in your console like this one:

Edit:

You are using react-hook-form to manage your form but at the same time giving values to your inputs.

Please refer to this link to initialize your form values.

short story:

1. Remove value form your input.
2. Pass an object to useForm hook containing initial values.

const { register, handleSubmit, errors } = useForm({
    defaultValues: {
      firstName: "steve",
      lastname: "smith"
    }
  });

Here is a working fork for your codesandbox

Answer 3

You need to make your input as a controlled component and write onChange handlers which will update the state. This will allow you to edit the input field values. Demo

const [disabled, setdisabled] = useState(false);
  const [name, setName] = useState(empData.item.name) // setting default name 
  const [lastname, setLastname] = useState(empData.item.lastname) // default lastname

  const edit = () => {
    setdisabled(true);
  };

  return (<div className="container-fluid">
    <div align="right">
      <button className="btn" onClick={edit}>
        Edit
      </button>
    </div>
    <div className="row">
      <div>
        <input
          type="text"
          disable
          id="item.value"
          value={name}
          onChange={(e) => {
            setName(e.target.value)
          }}
          disabled={disabled ? "" : "disabled"}
        />
        <br />
        <label htmlFor="name">Name</label>
      </div>
      <div>
        <input
          type="text"
          disabled
          id={"lastname"}
          value={lastname}
          onChange={(e) => {
            setLastname(e.target.value)
          }}
          disabled={disabled ? "" : "disabled"}
        />
        <br />
        <label htmlFor="lastname">Lastname</label>
      </div>
    </div>
  </div>);