Lift State Up in React.js with Hooks (2020)



Download the PDF front-end roadmap for FREE to keep you on track!
https://codestackr.podia.com/front-end-web-developer-roadmap-2020

Lift State Up in React.js with Hooks (2020)

In React, often there will be several components that need to reflect the same changing data. One way to do this effectively is by lifting the shared state up to their closest common ancestor.

In this video, we will create a temperature calculator that calculates whether water would boil at a given temperature. There will be two inputs that will need to share the application state. We will use hooks in React.js to lift the state up so that it can be the “single source of truth”.

Full code example: https://codepen.io/codeSTACKr/pen/gOayRBK
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course – https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🤖 I now use AI-powered code completions thanks to Kite. You should too so grab it FREE: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development – Beginners Roadmap (2020) – https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #Reactjs #React

source

You May Also Like