change value of input field react

Question

I have an input field in which I am pre populating the value of, with the value from the DB. it is a record that already exists, in which I would like to edit. The input field however, is not letting me edit the field. Please find it below:

     import React, { useState, useEffect } from "react";
import axios from "axios";
import { useHistory } from "react-router-dom";

const EditServicesPage = () => {

const history = useHistory()


  const [myData, setMyData] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  const [showEditButton, setShowEditButton] = useState(false);

  const [fields, setFields] = useState({
    updatedByCNUM: "",
    content: "",
    site: ""
  })


  var idFromListServicesPage = history.location.state.id
  console.log("22: " +  idFromListServicesPage)

  useEffect(() => {
    axios
      .post('/getDocToEdit', {id : idFromListServicesPage})
      .then((res) => {
        console.log("line 28 esp.js: " + res.data)
        setMyData(res.data);
        setIsLoading(true);
      })
      .catch((error) => {
        // Handle the errors here
        console.log(error);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }, []);

  const deleteById = (id) => {
    console.log(id);
    axios
      .post(`/deleteDoc`, { id: id })
      .then(() => {
        console.log(id, " worked");
        window.location = "/admin/content";
      })
      .catch((error) => {
        // Handle the errors here
        console.log(error);
      });
  };

 
  const handleInputChange = e => setFields(f => ({...f, [e.target.name]: e.target.value}))

  const editById = (id, site, content, updatedByCNUM) => {
    
    console.log(id, site, content, updatedByCNUM);
    axios
      .post(
        '/editDoc',
        ({
          id: id,
          location: site,
          content: content,
          updatedByCNUM: updatedByCNUM
        })
      )
      .then(() => {
        console.log(id, " worked");
        window.location = "/admin/content";
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const onClickEdit = (e, _id) => {
    e.preventDefault();
    var site = document.getElementById("site").value;
    var content = document.getElementById("content").value;
    var updatedByCNUM = document.getElementById("updatedByCNUM").value;
    console.log(site, content, updatedByCNUM)
    editById(_id, site, content, updatedByCNUM);
  };

  const onTyping = (value) => {
    if (value.length > 0) {
      setShowEditButton(true);
    } else {
      setShowEditButton(false);
    }
  };

  
  return (
    <table id="customers">
         <h1>Edit Services Page</h1>
      <tr>
        <th>site</th>
        <th>content</th>
        <th>updatedByCNUM</th>
        <th>Actions</th>
      </tr>
          <tr>
            <td>
            <input
              // ref={site.ref}
              type="text"
              value={myData.site}
              onInput={(e) => onTyping(e.target.value)}
              onChange={handleInputChange}
              placeholder={myData.site}
              name="site"
              id="site"
            />{" "}
              {/* <input
                type="text"
                placeholder={site}
                onChange={(e) => onTyping(e.target.value)}
                name="site"
                id="site"
              /> */}
            </td>
            <td>
            <input
              // ref={content.ref}
              type="text"
              value={myData.content}
              onInput={(e) => onTyping(e.target.value)}
              onChange={handleInputChange}
              placeholder={myData.content}
              name="content"
              id="content"
            />
            </td>
            <td>
              <input
                type="text"
                placeholder={myData.updatedByCNUM}
                name="updatedByupdatedByCNUMhide"
                id="updatedByupdatedByCNUMhide"
                readOnly
              />{" "}
            </td>
            <td>
              {/* <input type="hidden" placeholder={myData.updatedByCNUM} name="updatedByCNUM" id="updatedByCNUM" value={updatedByCNUM}/>{" "} */}
            </td>
            <td>
            <button
              onClick={(e) => {
                e.preventDefault();
                deleteById(idFromListServicesPage);
              }}
              disabled={isLoading}
            >
              Delete
            </button>
           <button
           
           onClick={(e) => {
            e.preventDefault();
            editById(idFromListServicesPage);
          }}
          >
             Edit
           </button>
            {showEditButton && (
              <button onClick={(e) => onClickEdit(e, idFromListServicesPage)}>Submit Edit</button>
            )}
             </td>
          </tr>
    </table>
  );
};

export default EditServicesPage;

showButton:

 const onTyping = (value) => {
    if (value.length > 0) {
      setShowEditButton(true);
    } else {
      setShowEditButton(false);
    }
  };

when I try to type into the input field, it doesn't allow me to type, but keeps the pre existing value there already. how can I fix this?

Answer 1

Just add setMyData like this:

const onTyping = (name, value) => {
  setMyData({ ...myData, [name]: value });
  if (value.length > 0) {
    setShowEditButton(true);
  } else {
    setShowEditButton(false);
  }
};

And

onInput={(e) => onTyping(e.target.name, e.target.value)}

Answer 2

You need a state which has the initial values from the DB

const [data, setData] = useState({
  site: newData.site || "",
  content: newData.content || "",
});

const handleInputChange = (e) => {
  const { name, value } = e.target;

  setData((currentData) => ({ ...currentData, [name]: value }));
};

return (
  // .....

  <input
    // ref={site.ref}
    type="text"
    value={data.site} // use data.site here instead of the newData
    onChange={handleInputChange}
    placeholder={myData.site}
    name="site"
    id="site"
  />

  // .....
);