CODEWITHSUNDEEP
reactjs
Kevin.a
Kevin.a

Reputation: 4296

change state while preserving previous state

I'm using hooks to change the state like this: 

 const [fieldValues, setFieldValues] = useState([{}]); 


const handleChange = (e) => {
    e.preventDefault();
    setFieldValues( prev => ([...prev, {value : e.target.value , field: e.target.name , project : e.target.id} ]))
}

My form is like this:

          <form>
                    <textarea defaultValue = {project.fieldKpi.value ? project.fieldKpi.value : null}  name={project.fieldKpi.id} id={project.projectId} onChange = {handleChange}></textarea>
                    <textarea defaultValue = {project.fieldContract ? project.fieldContract.value : null}  name={project.fieldContract.id} id={project.projectId} onChange = {handleChange}></textarea>
                    <input type="submit" value="Opslaan"/>
                </form>

When i change the form the onchange triggers and i get this error:

enter image description here

what i want is an array of multipje different objects unless they're the same then dont add a new one.

Upvotes: 2

Views: 34

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58553

I think this is issue of Event Pooling :

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

Solution :

const handleChange = (e) => {
    e.preventDefault();
    const { value , name , id } = event.target; // <---- HERE
    setFieldValues( prev => ([...prev, {value : value , field: name , project : id} ]))
}

Upvotes: 3

Related Questions