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)=>{}
Senior Software Engineer at Netflix. Building TypeScript for JavaScript Developers (tsforjs.com). Find me on Bluesky (@shaundai.com) or YouTube (youtube.com/shaundai)
Location
Atlanta, GA
Education
MBA at Northeastern University, BBA at Temple University
Pronouns
she/her
Work
Senior Software Engineer, Productivity UI at Netflix
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!