如何将 function 作为道具传递（功能组件到 function 组件）

Question

I'm currently trying to make the transition from class to function components. I know passing a function between class components involves binding and then add the onClick to the child component.

Below is the code that I have - when I click I am not getting the console log - can someone tell me where I'm going wrong?

PARENT

import React, { useState } from 'react'
import Box from './Box'
import './GameBoard.css'
import { v4 as uuidv4 } from 'uuid'

function GameBoard() {

    const randLit = () => (Math.floor(Math.random() * 2)) === 1
    const [gameBoard, setGameBoard] = useState([...new Array(25)].map(box => randLit()))

    const handleIsLit = (evt) => {
        console.log('working')
    }

    return (
        <div className="GameBoard">
            {gameBoard.map((box, idx) => <Box isLit={box} key={uuidv4()} onClick={handleIsLit} />)}
        </div>
    )

}

export default GameBoard

CHILD

import React from 'react'
import './Box.css'


const Box = (props) => {
        return <div onClick={props.handleIsLit} className={`Box ${props.isLit ? 'Box-light' : 'Box-dark'}`}></div>
}

export default Box

Answer 1

The name of the prop is onClick , not handleIsLit

const Box = (props) => {
        return <div onClick={props.onClick} className={`Box ${props.isLit ? 'Box-light' : 'Box-dark'}`}></div>
}

Answer 2

you shouldn't pass the funtion by onClick. Here a sandbox