# OLI SAYS...  --- ## Planning (Idea vs reality)  --- ## Demo https://oli-says.netlify.app --- #### Proud of: crashed our browsers `===` to `!==` -> infinite loop ```javascript=1 useEffect(() => { if(true) updateState }, [updateState]) ```  --- ### Proud of: - managed to fix bugs and have a fully working app (as far as we know) --- ## Learning --- ### Out of Sync! ```javascript=100 const Button = ({name, img, children, setRound, question, setScore, setUserGuess}) => { const clickHandler = (event)=>{ const newUserGuess = name setUserGuess(newUserGuess) setRound(round => round+1); if(newUserGuess === question) { setScore(score => score+1) } } ``` --- ### Boolean gameState (Before) ```javascript=1 function const [gameOn, setGameOn] = React.useState(false); const [gameEnd, setGameEnd] = React.useState(false); ``` ```javascript=3 const AppContent = () => { if(gameOn && !gameEnd) return <Game/> if(gameEnd) return <EndGame/> return <Landing /> } return(<div>{AppContent()}</div>) } ``` --- ### Better gameState (After) ```javascript=1 const [gameState, setGameState] = React.useState("initial"); ``` ```javascript=2 if(gameState === "initial") return <Landing/> if(gameState === "running") return <Game/> if(gameState === "end") return <EndGame/> ``` --- ### Distinct random number generator ```javascript= function arrOfRandomNum(num, length) { let rangeArr = [1, 2, 3, ...etc..., length]; for (let i = 0; i < (length - num); i++) { let randomNum = Math.floor(Math.random() * rangeArr.length); rangeArr.splice(randomNum - 1, 1); } return rangeArr; } ``` --- ### Destructuring Props ```const Human = ({pokeDataArr, setUserGuess, userGuess, setRound, round, question, score, setScore})``` - as app got bigger lots of props needed - destructuring everything made it hard to read - (should try to use spread operator) --- # Any questions?