Passing props from parent to child using hooks-CodePudding

I am new to react and I am trying to pass props from a parent function to a child. The parameters I am passing "square_state" and "setSquare_state" are not being recognized in the useSquare or handle_square_click function. I am using the following https://designcode.io/react-hooks-handbook-props as a reference.

  const handle_square_click = (props) => {
    props.setSquare_state(player)
    setGetplayer(true)
  }

  const useSquare = (square_state, setSquare_state) => {
    // Hook for square state management and rendering
    return (
        <button className="square" onClick={<handle_square_click setSquare_state={setSquare_state}/> }>
          {square_state}
        </button>
    );
  }
  
  // ------------------------------------------------------------------
  // Board Function

  const Board = ({player}) => {
    let status = "Next Player : "   player
    const [square1_state, setSquare1_state] = useState(1);
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          <useSquare
            square_state={square1_state}
            setSquare_state={setSquare1_state}
          />

CodePudding user response：

There are a number of problems here.

Functions prefixed with use should be reserved for custom hooks. If you have a function that returns a React component, you should follow the React standards and give it an upper-case name, one that doesn't start with use - for example, you could call the square function Square.
When you pass props like
```
     square_state={square1_state}
     setSquare_state={setSquare1_state}
```
The child then sees them as the properties of an object, where that object is the first argument to the function - like you're doing with handle_square_click. So
```
const useSquare = (square_state, setSquare_state) => {
```
should be
```
const Square = ({ squareState, setSquareState }) => {
```

(using the very common camelCasing convention)

handle_square_click is a plain function, not a component, so onClick={<handle_square_click makes no sense. Declare the function inside Square, and reference just that function when passing the onClick prop. Declare the function inside Square to avoid having to pass things around.
The click handler attempts to reference player, which is not in scope. You need to pass it down from the parent. (setGetplayer probably needs to be passed down too, but its declaration isn't shown in the code in the question)

const Board = ({ player }) => {
    const [squareState, setSquareState] = useState(1);
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          <Square
            squareState={squareState}
            setSquareState={setSquareState}
            player={player}
          />

and

const Square = ({ squareState, setSquareState, player }) => {
  const handleSquareClick = () => {
    setSquareState(player);
    // setGetplayer(true);
  };
  return (
    <button className="square" onClick={handleSquareClick}>
      {squareState}
    </button>
  );
};

CodePudding user response：

  <useSquare
        square_state={square1_state}
        setSquare_state={setSquare1_state}
   />

This not how to use child component in React or hooks! You should name your (custom) component starting with capital letter and call hook inside the component.

So as the (prev answer that appeared as I was typing this), you should refactor code.