1 
export default function Form() {
const [user, setUser] = useState({
    name: "",
    numOfQs: 0
})
console.log(user)
function handleUserDataChange(event) {
    setUser(prevUser => {
        return {
            ...prevUser,
            [event.target.name]: event.target.value
        }
    })
}
return (
    <>
        <input 
        type="text" 
        placeholder="username"
        name="name"
        value={user.name}
        onChange={handleUserDataChange} />
        <input 
        type="number" 
        name="numOfQs"
        value={user.numOfQs}
        onChange={handleUserDataChange} />
    </>
)}

I was trying to build my form using react, and when I tried to use input[type: number] on the form field it was giving me this error, don't know why. I was reading through react docs about forms, and everything from the checkbox, radio buttons, textarea was all working fine. but when I used an input element of the type number, I got the following error.

*!Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See fb.me/react-event-pooling for more information.

so, the problem only arises when an input of type "number" is introduced. when I remove it all of my other form elements work fine.

I'm still in the learning phase of react. please help me out.

Improve this question

1 Answer 1

Reset to default
1

This happened because the event that passed into the function is used as an asynchronous event.

To fix this, decompose the event object

function handleUserDataChange(event) {

    const { name, value } = event.target;
    setUser(prevUser => {
        return {
            ...prevUser,
            [name]: value
        }
    })
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thanks, Sachila. Now it's working fine. can you suggest me some resources that i could read about. i know what asynchronous means, but an asynchronous event, i can't understand it.
developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/….
I haven't changed the code except the answer you suggested & now, i'm getting this error when i click on the up or down arrows. Warning: A component is changing an uncontrolled input of type number to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
for input values, create a useState variables and use it for the value. like value={userName} Also update the the state variable in the onchange method

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.