React passing data between functions

Question

I'm a beginner at React and I wanna go step by step using official tutorial: create Tic Tac Toe game. I have a hard time because I learn using functions, not Classes. When i try to implement it i get an error " Line 7:5: 'setSquares' is not defined". I think i need to pass some data from RenderSquare function to handleClick but i don't know how to do it..This is official example provided by React people:

My dumb code:

import Square from './Square';
import { useState } from 'react';

function handleClick(i) {
     const squares = squares.slice();
     squares[i] = 'X';
     setSquares({ squares });
}

 function RenderSquare(i) {
 const [squares, setSquares] = useState(Array(9).fill(null));

return (
    <>
        <Square
            value={squares[i]}
            onClick={() => {
                handleClick(i);
            }}
        />
        ;
    </>
   );
 }

you need to put the handleClick function inside the RenderSquare functional component. Currently, the handleClick function is outside of scope of RenderSquare. — goto
– goto, Commented May 29, 2021 at 17:38

CertainPerformance · Accepted Answer · 2021-05-29 17:38:13Z

1

Define handleClick in the body of the component, so that handleClick will have scope of setSquares.

setSquares({ squares }); should also be setSquares(squares);, since the state is an array, not an object.

function RenderSquare(i) {
    const [squares, setSquares] = useState(Array(9).fill(null));
    function handleClick(i) {
        const squares = squares.slice();
        squares[i] = 'X';
        setSquares(squares);
    }
    return (
        <>
            <Square
                value={squares[i]}
                onClick={() => {
                    handleClick(i);
                }}
            />
       ;
        </>
    );
}

I think the const [squares, setSquares] = useState line should also be in the parent component and passed down to the child - you don't want an array of squares for every square rendered, you want only a single array of squares.

const App = () => {
    const [squares, setSquares] = useState(Array(9).fill(null));
    return squares.map((val, i) => <Square {...{ i, squares, setSquares }} />);
};
function RenderSquare({ i, squares, setSquares }) {
    function handleClick() {
        const squares = squares.slice();
        squares[i] = 'X';
        setSquares(squares);
    }
    return (
        <>
            <Square
                value={squares[i]}
                onClick={() => {
                    handleClick(i);
                }}
            />
       ;
        </>
    );
}

answered May 29, 2021 at 17:38

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sebastian Marius Over a year ago

Thank you so much! But i have a question, if i would need to pass these data, like having 2 separate .js files, how would i do it?

CertainPerformance Over a year ago

Through the props, usually - like in the second snippet in the answer, I'm passing i, squares, setSquares as props from the parent to the child.

Collectives™ on Stack Overflow

React passing data between functions

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related