TypeError e.target is null with simple component

#1

Hello,
Trying to get this component to work
[@react.component]
let make = () => {
let (value, setValue) = React.useState(() => “”);

  <input value onChange={event => setValue(_ => ReactEvent.Form.target(event)##value)} />;
};

Seems like a rather simple component and as far as I can see this should work. When I type one character in the input box it seems to be all fine, however when I typed the second one I seem to get a null pointer issue. How should this normally be handled, seems a rather basic thing so I suppose I am doing something wrong?

#2

So I seem to have avoided this errorby changing the handler code to this
let v = ReactEvent.Form.target(event)##value
setValue(_ => v);
My hypothesis is that by the time the closure inside setValue gets run, the event has been recycled. Assigning the value to a variable makes sure that the value is still available at that moment.
So that is all fine, but what I really wonder is that it seems I am alone running into this issue, as most of the simple reason examples I see immediately use the ReactEvent.Form.target function in the onChange (like for example this : https://blog.d.onald.org/react-hooks-in-reasonml-reasonreact/).

#3

Yeah, that’s what it is. You were effectively memoizing an event object in a closure, but synthetic events get recycled.

#4

Yeah, sounds logical. But do you happen to have any idea why those examples then seem to work? Cause that is really confusing tbh.

#5

IDK if it works for the author of the post above, because his example doesn’t work for me either :slight_smile:

#6

Ok thanks, that is useful info :slight_smile: