TypeError e.target is null with simple component


Trying to get this component to work
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?


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/).


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


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


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


Ok thanks, that is useful info :slight_smile: