am triying to make a simple tik-tak-toe game using react, but i have some problem in my code.

This is the parent component :

const Wrapper = () => {
         
   const [cases, setCases] = useState(Array(9).fill(null));
   const [isX, setIsX] = useState(true);

   const handleClick = (i) => {
        cases[i] = isX ? 'X' : 'O';
        setCases(cases);
        setIsX(!isX);
        console.log(cases)
   }
    
    return ( 
        <div className='ttt-wrapper'>
            <div className='ttt-3-cols'>
                <Case value={cases[0]} onClick={()=> handleClick(0)}/>
                <Case value={cases[1]} onClick={()=> handleClick(1)}/>
                <Case value={cases[2]} onClick={()=> handleClick(2)}/>
            </div>
            <div className='ttt-3-cols'>
                <Case value={cases[3]} onClick={()=> handleClick(3)}/>
                <Case value={cases[4]} onClick={()=> handleClick(4)}/>
                <Case value={cases[5]} onClick={()=> handleClick(5)}/>
            </div>
            <div className='ttt-3-cols'>
                <Case value={cases[6]} onClick={()=> handleClick(6)}/>
                <Case value={cases[7]} onClick={()=> handleClick(7)}/>
                <Case value={cases[8]} onClick={()=> handleClick(8)}/>
            </div>
        </div>
    )
}

This is the child component :

const Case = ({ value, handleClick }) => {
   console.log(value)
  return (
    <button className='ttt-case' onClick={handleClick} >
        { value }
     </button>
  )
}

How can i use the handleClick function inside so i can use the click ?

CodePudding user response：

You can execute handleClick like this:

const Case = ({ value, handleClick }) => {
   console.log(value)
  return (
    <button className='ttt-case' onClick={()=>handleClick(value)} >
        { value }
     </button>
  )
}

CodePudding user response：

const Wrapper = () => {
         
   const [cases, setCases] = useState(Array(9).fill(null));
   const [isX, setIsX] = useState(true);

   const handleClick = (i) => {
        const newCases = [...cases];  //making a copy
        newCases[i] = isX ? 'X' : 'O';   // I'm not sure what is the logic here tbh
        setCases(newCases);
        setIsX(x=>!x); // updater function
   }
    
    return ( 
        <div className='ttt-wrapper'>
            <div className='ttt-3-cols'>
                <Case value={cases[0]} handleClick={handleClick}/>
                <Case value={cases[1]} handleClick={handleClick}/>
                <Case value={cases[2]} handleClick={handleClick}/>
            </div>
            <div className='ttt-3-cols'>
                <Case value={cases[3]} handleClick={handleClick}/>
                <Case value={cases[4]} handleClick={handleClick}/>
                <Case value={cases[5]} handleClick={handleClick}/>
            </div>
            <div className='ttt-3-cols'>
                <Case value={cases[6]} handleClick={handleClick}/>
                <Case value={cases[7]} handleClick={handleClick}/>
                <Case value={cases[8]} handleClick={handleClick}/>
            </div>
        </div>
    )
}

const Case = ({ value, handleClick }) => {
   console.log(value)
  return (
    <button className='ttt-case' onClick={()=>handleClick(value)} >
        { value }
     </button>
  )
}

CodePudding user response：

This is the solution :

const Wrapper = () => {
         
   const [cases, setCases] = useState(Array(9).fill(null));
   const [isX, setIsX] = useState(true);

   const handleClick = (i) => {
        cases[i] = isX ? 'X' : 'O';
        setCases(cases);
        setIsX(!isX);
        console.log(cases)
   }
    
    return ( 
        <div className='ttt-wrapper'>
            <div className='ttt-3-cols'>
                <Case value={cases[0]} onClick={()=> handleClick(0)}/>
                <Case value={cases[1]} onClick={()=> handleClick(1)}/>
                <Case value={cases[2]} onClick={()=> handleClick(2)}/>
            </div>
            <div className='ttt-3-cols'>
                <Case value={cases[3]} onClick={()=> handleClick(3)}/>
                <Case value={cases[4]} onClick={()=> handleClick(4)}/>
                <Case value={cases[5]} onClick={()=> handleClick(5)}/>
            </div>
            <div className='ttt-3-cols'>
                <Case value={cases[6]} onClick={()=> handleClick(6)}/>
                <Case value={cases[7]} onClick={()=> handleClick(7)}/>
                <Case value={cases[8]} onClick={()=> handleClick(8)}/>
            </div>
        </div>
    )
}

Case component :

  const Case = ({ value, onClick }) => {      return (
        <button className='ttt-case' onClick={onClick}>
            { value }
         </button>
      )
    }