But first, a little story 😀

Please view this on a desktop

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dbc31a68-af6c-4272-85e6-d7fda169716d/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/31c73748-6d47-41b2-bb56-40b0e0348af2/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dbc31a68-af6c-4272-85e6-d7fda169716d/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/535d61e8-ac71-4913-a09b-8e9de65a0427/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b8a3ddf4-92ff-4650-8864-e4b32496a634/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/535d61e8-ac71-4913-a09b-8e9de65a0427/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c2affc54-49e5-4d12-b7e0-69f8fd0caf0e/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dbc31a68-af6c-4272-85e6-d7fda169716d/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/535d61e8-ac71-4913-a09b-8e9de65a0427/Untitled.png

earnMoney

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/535d61e8-ac71-4913-a09b-8e9de65a0427/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c2affc54-49e5-4d12-b7e0-69f8fd0caf0e/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c2affc54-49e5-4d12-b7e0-69f8fd0caf0e/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4710be22-205a-4516-b30b-132e6d3416a0/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5c86fca7-2d60-4336-8a93-b35b3c0187d0/Untitled.png

onWork = {(💲) => earnMoney(💲)}

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dbc31a68-af6c-4272-85e6-d7fda169716d/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/31c73748-6d47-41b2-bb56-40b0e0348af2/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/31c73748-6d47-41b2-bb56-40b0e0348af2/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dbc31a68-af6c-4272-85e6-d7fda169716d/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/535d61e8-ac71-4913-a09b-8e9de65a0427/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b8a3ddf4-92ff-4650-8864-e4b32496a634/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b8a3ddf4-92ff-4650-8864-e4b32496a634/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/535d61e8-ac71-4913-a09b-8e9de65a0427/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c2affc54-49e5-4d12-b7e0-69f8fd0caf0e/Untitled.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4710be22-205a-4516-b30b-132e6d3416a0/Untitled.png

Remember when we discussed that

state is managed inside a component, and it flows down to its child components via props

Generally, you'll have sibling components that need to reflect the same changing data, and in React we usually "lift the state up" to their common parent.

But how do we change state of a parent component from a child component?

🏘 Case study: Airbnb

http://bit.ly/2TqjYa1

Let's take Airbnb for example:

Parent component: main/home page <—— state is here

Child component: House with a Like button <—— when we click this...

Child component: Liked Properties <—— ...this should be updated

Intro to Function props - make data flow up ⬆️

To make data flow up, i.e to have a child component affect the state of it's parent or any ancestor,

"Function props" are props that happen to be functions 🤷🏽‍♂️

So far, we have been passing primitives and objects as props, like this: