javascript - Can't pass useState() 'set' function to grand child

Question

I'm having issues trying to get my useState variable to work. I create the state in my grandparent then pass it into my parent. Here's a simplified version of my code:

export function Grandparent(){

return(
    <div>
         const [selectedID, setSelectedID] = useState("0")
         <Parent setSelectedID2={setSelectedID} .../>  //(elipses just mean that I'm passing other params too)
    <div />
)}

Parent:

const Parent = ({setSelectedID2 ...}) => {

   return(
      <div>
          {setSelectedID2("5")}  //works
          <Child setSelectedID3={setSelectedID2} />
      </div>
   )
}

From the parent I can use 'setSelectedID2' like a function and can change the state. However, when I try to use it in the child component below I get an error stating 'setSelectedID3' is not a function. I'm pretty new to react so I'm not sure if I'm completely missing something. Why can I use the 'set' function in parent but not child when they're getting passed the same way?

Child:

const Child = ({setSelectedID3 ...}) => {
    
    return(
        <div >
            {setSelectedID3("10")} //results in error
        </div>
    );
};

question from:https://stackoverflow.com/questions/65645418/cant-pass-usestate-set-function-to-grand-child

Answer 1

Here's a working example with everything you have listed here. Props are passed and the function is called in each.

You don't need to name your props 1,2,3.., they are scoped to the function so it's fine if they are the same.

I moved useState and function calls above the return statement, because that's where that logic should go in a component. The jsx is only used for logic dealing with your display/output.

https://codesandbox.io/s/stupefied-tree-uiqw5?file=/src/App.js

Also, I created a working example with a onClick since that's what you will be doing.

https://codesandbox.io/s/compassionate-violet-dt897?file=/src/App.js

import React, { useState } from "react";

export default function App() {
  return <Grandparent />;
}

const Grandparent = () => {
  const [selectedID, setSelectedID] = useState("0");
  return (
    <div>
      {selectedID}
      <Parent setSelectedID={setSelectedID} selectedID={selectedID} />
    </div>
  );
};

const Parent = ({ selectedID, setSelectedID }) => {
  setSelectedID("5");
  return (
    <div>
      {selectedID}
      <Child setSelectedID={setSelectedID} selectedID={selectedID} />
    </div>
  );
};

const Child = ({ selectedID, setSelectedID }) => {
  setSelectedID("10");
  return <div>{selectedID}</div>;
};

output

10
10
10