Can't edit pre-populated input field data using React-CodePudding

I'm pre-populating an input field, using the data from an API. It's showing up just fine but I can't seem to edit it as it's not possible to edit the "value" field of an input field.

Here's what I want to do: I want to pre-populate the input fields, edit the data inside them and then push the updated data back to the API.

For example, for the input field with the name Street Address, it's pre-populating the value from the API. In this case "Manhattan". I want to then change that value inside the input field to "New York" and send it back to the API, so that inside the JSON file it will update this specific value.

The left input field from the image is not pre-populating data from the API. Thus, it's empty.

Here's what I've got now.

function WarehousesDetailsEdit() {
    const { id } = useParams();

    const [warehouseData, setWarehouseData] = useState([]);
    const [userInput, setUserInput] = useState([]);

    const handleChange = (e) => {
        setUserInput((recentInput) => ({ ...recentInput, [e.target.name]: e.target.value }));
    };

    useEffect(() => {
        axios
            .get(`http://localhost:8080/warehouses/${id}`)
            .then((resp) => {
                setWarehouseData(resp.data.warehouseDetails[0]);
            })
            .catch((err) => {
                console.log(err, "Error!");
            });
    }, [id]);

    return (
        <>
           
            // here, I'm able to update the input field as it's not coming from the API
            <input
                name="Warehouse Name"
                value={userInput.WarehouseName}
                onChange={handleChange}
            />
            
            // here, the field was pre-populated using the API. Meaning, I can't update it.
            <input
                name="Street Address"
                value={warehouseData.name}
                onChange={handleChange}
            />
        </>
    )

I've not included the axios.put() in the code as it doesn't seem relevant right now as I just want to be able to update the pre-populated input field for now.

CodePudding user response：

You're explicitly setting the value:

value={warehouseData.name}

And then nothing ever changes what's in warehouseData. Contrast that with the other <input> where the onChange event changes the value.

You can approach this in a couple of ways. Probably the simplest is to not have a warehouseData state at all. Just update the userInput state with the "pre-populated value". For example:

.then((resp) => {
  setUserInput((recentInput) => ({ ...recentInput, name: resp.data.warehouseDetails[0].name }));
})

Then both <input> elements can just use userInput:

<input
  name="Street Address"
  value={userInput.name}
  onChange={handleChange}
/>

Alternatively, if you want to keep both objects in their own separate state for some other reason, then you'd need to update that state. You can create a separate change handler for that:

const handleWarehouseDataChange = (e) => {
  setWarehouseData((recentData) => ({ ...recentData, [e.target.name]: e.target.value }));
};

And use that in your <input>:

<input
  name="Street Address"
  value={warehouseData.name}
  onChange={handleWarehouseDataChange}
/>