Why is my react hook overwriting the current value as apposed to adding multiple key value pairs to-CodePudding

I am attempting to use a map in react to pass props to an element which will include multiple input values. This requires the use of a hook to update changes to the state 'value' which should create an object that includes each input type and its corresponding value.

This is my file containing the child element


child.jsx 

const Forms = ({ formType, onFormChange, values, onTypeChange, error }) => {

  const handleChange = useCallback((event) => {
    onTypeChange(formType)
    onFormChange(event)
  }, [])
  
  return (
    <>
    <input className='createform-input' placeholder={formType} name={formType} value= {values.formType} onChange={handleChange} />
    </>
  )
}
export default Forms

and here is the parent element

parent.jsx
const [value, setForm] = useSetForm(); 
const types = ['firstname', 'lastname', 'email', 'password']

<form className='create-account-form' onSubmit={e => { e.preventDefault(); }}>
    {types.map((type) => {
         return(
             <Forms
                 formType={type}
                 onFormChange={setForm}
                 onTypeChange={setTypes}
                 values={value}
                 placeholder={type}
                 error={error}
            />
          )
       })}
   <button type='submit' onClick={handleData}>Create Account</button>
</form>

and here is the custom hook I am using to update the state values

hook.jsx

const useSetForm = () => {
    const [value, setForm] = useState({}); 
    return [value, (event) => { event.preventDefault(); setForm({...value, [event.target.name]: event.target.value })}]
}

export default useSetForm

output after updating each input field where the last input field I entered information to was the firstname input.

Object { firstname: "jack" }

Any help would be appreciated!

CodePudding user response：

Try to change your Forms input value to values[formType], using values.formType would return undefined:

const Forms = ({ formType, onFormChange, values, onTypeChange, error }) => {
  const handleChange = useCallback((event) => {
    onTypeChange(formType);
    onFormChange(event);
  }, []);

  return (
    <>
      <input
        className='createform-input'
        placeholder={formType}
        name={formType}
        value={values[formType]}
        onChange={handleChange}
      />
    </>
  );
};
export default Forms;

Also, remove the event.preventDefault() from the setForm function:

const useSetForm = () => {
    const [value, setForm] = useState({});
    return [
      value,
      (event) => {
        setForm((oldValue) => {
          return { ...oldValue, [event.target.name]: event.target.value };
        });
      },
    ];
  };
  
  export default useSetForm;

CodePudding user response：

focus on your child component in order to prevent change uncontrolled components to controlled 'cause when starts values[formType] doesn't exists you could do the next:

const Forms = ({ formType, onFormChange, values, onTypeChange, error }) => {
  const [value, setValue] = useState("")
      
  const handleChange = useCallback((event) => {
    setValue(event.target.value)
    onTypeChange(formType)
    onFormChange(event)
  }, [])
  
  return (
    <>
      <input className='createform-input' placeholder={formType} name={formType} value= {value} onChange={handleChange} />
    </>
  )
}