'React - can't pass up data from child component

I am passing down my state setter function (setPlayerButton) from the parent component to the child. When it's called I get an error that it is not a function. I have another state setter function (setGameStarted) set up the exact same way and it works without error. Why is this one throwing an error?

Parent component:

function App() {

  const [gameStarted, setGameStarted] = useState<boolean>(false)
  const [playerButton, setPlayerButton] = useState<string>("")

  // const updatePlayerButton = (button: string) => {
  //   setPlayerButton(button)
  // }


  return (
    <div>
        <Header />
        {gameStarted ? <PlayingGame playerButton={playerButton}/> : <Gameboard setGameStarted={setGameStarted} setPlayerButton={setPlayerButton}/>}
        <Rules />
    </div>
  );
}

Child component (Relevant part of it):

interface IgameBoard {
  setGameStarted: React.Dispatch<React.SetStateAction<boolean>>
  setPlayerButton: React.Dispatch<React.SetStateAction<string>>
} 

// React.Dispatch<React.SetStateAction<string>>



function Gameboard({setGameStarted}: IgameBoard, {setPlayerButton}: IgameBoard) {

  const setGame = (event: MouseEvent<HTMLElement>) => {
    setGameStarted(true)
    //id isn't in all variations of target and can be, for example window. If you know the target is an element, you can cast to that
    setPlayerButton((event.target as Element).id)
  }

  return (
    <div>

      <section className='mx-auto w-11/12 flex flex-wrap z-10 -mb-80 mt-24 '>
        {/* border-2 border-orange-300 */}
        <div onClick={setGame} id='Scissors1' className='w-full mb-4'>
          <div className='bg-scissors-bg-first -mb-[116px] rounded-full w-28 h-28 mx-auto' id='Scissors2'></div>
          <div className='bg-scissors-bg-last -mb-24 rounded-full w-28 h-28 mx-auto' id='Scissors3'></div>
          <div className='bg-slate-300 -mb-[76px] rounded-full w-20 h-20 z-10 mx-auto'id='Scissors4'></div>
          <div className='bg-white rounded-full -mb-16 w-20 h-20 z-20 mx-auto' id='Scissors5'></div>
          <img src={Scissors} alt='Scissors button' className='mx-auto w-9 z-30' id='Scissors6'/>
        </div>

The error:

Gameboard.tsx:24 Uncaught TypeError: setPlayerButton is not a function
    at setGame (Gameboard.tsx:24:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
    at executeDispatch (react-dom.development.js:8243:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
    at processDispatchQueue (react-dom.development.js:8288:1)
    at dispatchEventsForPlugins (react-dom.development.js:8299:1)
    at react-dom.development.js:8508:1

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'React - can't pass up data from child component

Sources

Related Questions