无法将 useState() 'set' function 传递给孙子

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>
    );
};

Answer 1

In React you make your calculations within the components/functions (it's the js part) and then what you return from them is JSX (it's the html part).

export function Grandparent(){

const [selectedID, setSelectedID] = useState("0");

return(
    <div>
         <Parent setSelectedID2={setSelectedID} .../>  //(elipses just mean that I'm passing other params too)
    <div />
)}

You can also use (but not define!) some js variables in JSX, as long as they are "renderable" by JSX (they are not Objects - look for React console warnings).

That's your React.101:)

Answer 2

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

Answer 3

const [selectedID, setSelectedID] = useState("0")

should be outside return