Component Doesn't Update On Props Change

This component doesn't update even tho props change. prop row is an object. console.log('row', row') does work. and get correct data also console.log('Data', data) import React, {u

Solution 1:

The defaultValue prop is used for uncontrolled components. It sets the starting value, and then it's out of your hands. All changes will be handled internally by input. So when you rerender and pass in a new defaultValue, that value is ignored.

If you need to change the value externally, then you either need to unmount and remount the components, which can be done by giving them a key which changes:

<input key={data[head].someUniqueIdThatChanged} 

Or you need to use the input in a controlled manner, which means using the value prop instead.

value={data[head] == null ? "" : data[head]}

For more information on controlled vs uncontrolled components in react, see these pages:

https://reactjs.org/docs/forms.html#controlled-componentshttps://reactjs.org/docs/uncontrolled-components.html

---

P.S, copying props into state is almost always a bad idea. Just use the prop directly:

constForm = ({row}) => {
  return (
    <>
      {Object.getOwnPropertyNames(row).map((head) => {
        return <inputtype="text"name={head}defaultValue={row[head] == null ? "" :row[head]} />;
      })}
    </>
  );
}