Great article. There are some typos though.
A function that updates a state cannot be invoked inside of the render function or in the return block of a functional component, it will lead to infinite re-renders. You should instead pass the reference of the function.
So it is onClick={handleMeditation} instead of onClick={handleMeditation()}.
Also when passing props to functional components, to specify each props name you need to destructure.
So it's const Toddler=({handleTemperTantrum, emotion})=>{} instead of const Toddler=(handleTemperTantrum, emotion)=>{}
Great article. There are some typos though.
A function that updates a state cannot be invoked inside of the render function or in the return block of a functional component, it will lead to infinite re-renders. You should instead pass the reference of the function.
So it is
onClick={handleMeditation}instead ofonClick={handleMeditation()}.Also when passing props to functional components, to specify each props name you need to destructure.
So it's
const Toddler=({handleTemperTantrum, emotion})=>{}instead ofconst Toddler=(handleTemperTantrum, emotion)=>{}Great catches! Normally I do a better job proofreading these before publishing :D fixed - thank you!