Discussion on: In React, component controls you!

View post

Replies for: Thats indeed a possibility. If you never need the event object then its OK to just expose the value. However, React's onChange does give you the ev...

OK, I think I understand the problem now 😊

I think this custom hook will fix your issues.

import React from "react";

export default function (initalState, target) {
  const [state, setState] = React.useState(initalState);
  const [newState, setNewState] = React.useState(initalState);
  const event = React.useMemo(() => new Event("change", { bubbles: true }), []);

  const updateStates = React.useCallback((updated) => {
    setState(updated);
    setNewState(updated);
  }, []);

  React.useEffect(() => {
    if (state === newState) return;
    const { current } = target;

    if (!current) return;

    current.value = newState;
    const tracker = current._valueTracker;

    if (tracker) {
      tracker.setValue(state);
    }

    current.dispatchEvent(event);
  }, [state, newState, event, target]);

  return [state, updateStates, setNewState];
}

You basically use this hook the same way you use React.useState but you have to pass in a ref target when you initialise it also it returns 3 items rather than 2, [state, setState, callStateChange].

That last function will change the value of the input and trigger an event for your onChange to pick up and deal with.

Here's a working example.

Unless I've totally misunderstood again 😅