wrap your inputs in a form, and give it an initialValue. it must work.

Get initial form value with javascript

A few ideas after a quick look:

• Inside your try use onChange instead of onType
• Keep track of your new typed value with a state, and then setOldState(updatedValues) when you submit
• Once submitted, re-setUpdatedValues to whichever initial value you’d like
  on you inputs.

I have this: this is the whole page, just do block out any confusion.

  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: myData.updatedByCNUM,
    content: myData.content,
    site: myData.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 editById = (id) => {
  //   console.log(id);
  //   // window.location = "/admin/services/:site";
  //   axios
  //     .post(`/editDoc`, { id: id })
  //     .then(() => {
  //       console.log(id, " worked");
  //       window.location = "/admin/services/:site";
  //     })
  //     .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/services";
      })
      .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("updatedByupdatedByCNUMhide").value;
    console.log(site, content, updatedByCNUM)
    editById(_id, site, content, updatedByCNUM);
  };

  const onTyping = (name, value) => {
    setMyData({ ...myData, [name]: 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.name, 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.name, 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;

however, when I edit a field, as in type into either site, or content, the original values of the unedited fields don’t stay. so If I type a new value into site, and then leave content as the original, then it doesn’t send content original value back to the backend, and keeps it null. I don know why. can anyone help?