I am trying to make a form and create controlled inputs, I've used before window.event but this is deprecated and I don't want to use it anymore althought if I use it the solution works as I excepted I am concerned for compatibility, but if I don't use it, I tried using syntheticEvent and it doesn't work, I tried 2 ways I added the event using .bind() which doesn't work gives the error that can't access inputs,setInputs before initialization, and in the second using the SyntheticEvent (e)=>{changeHandler}
when I write the second letter it crashes with error cannot read property id of null, what is going on, is this possible to do with hooks or I should go with classes?
const changeHandler = (inputs, setInputs, clone, event) => {
const cloned = clone(inputs[event.target.id]);
cloned.config.value=event.target.value;
setInputs(prevState=>{
return {
...prevState,
[event.target.id]:cloned
}
})
};
Inputs configuration using useState I pass as props to my custom Input Component
const [inputs, setInputs] = useState({
username: {
config: {
type: "text",
placeholder: "John Doe",
id: "username",
value: "",
onChange: changeHandler.bind(this,inputs,setInputs,cloneDeep)
},
label: {
label: "Username *",
htmlFor: "username",
},
},
email: {
config: {
type: "email",
placeholder: "[email protected]",
id: "email2",
value: "",
onChange: (e) => {
changeHandler(inputs, setInputs, cloneDeep,e);
},
},
label: {
label: "E-mail *",
htmlFor: "email2",
},
},
});
Edit: 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().
Using event.persist() solved the problem but I wonder is it okay to use it?
I was able to fix it using event.persist() which prevents the nullification of the original event, that's why second time when the event was fired I was getting the error about trying to access property of null