For React Prop Drilling, why is it that I can only pass one State Parameter instead of both the State and the State Setter?

Question

This is just a simple concept question I am trying to understand as I use and learn React, but why can I only send one State Parameter through Prop Drilling? This is if I use either UseState or if I use the XState platform. I don't know if this has to do with it, but usually I have the JSX-creating function in a different file included in the Main file that contains the State-Map, and I've been doing it in Typescript.

for example:

interface Myprops { mystate:any, setState:any};
const CreateMyJSX = ({mystate, setState, ...props}:Myprops) => {
   console.log(mystate)
   console.log(setState)
  if(mystate.matches("StateA"))
   {
     setState("goToStateB");
     return(<> <div className="MyCrazyADiv" /></>
   }
   else
     return(<><div className="BtierDiv" /></>)
}

export default function App() {
  const [mystate, setState] = useMachine(aRandomXStateMachineIincluded);

  return(<>
         <CreateMyJSX mystate={mystate} setState={setState} />
         </>);
}

When I run something like this I will get an error, and it will be because, as the console log for setState shows, setState is null. Meanwhile, the console log of mystate will still say "StateA" or whatever it is supposed to. If I switch the order (or remove setState all together) then the other will work while mystate is null. Right now I've been going around this error by using Context, but if I am drilling only one or two functions deep I'd rather just prop-drill.

Can someone help me to better understand this? I haven't seen this problem online, or talk of limitations for this in the documentations, so am I just unlucky somehow? I am testing this in Chrome, but I get the same in firefox and safari. I know I must be misunderstanding some things.

Thank You for the help!

Answer 1

you can check the xstate React example

and you can try adding React state changes in event handler like button click

  const [state, send] = useMachine(toggleMachine);
  ...
  <button onClick={() => send("TOGGLE")}>