GoConqr has a new look! Let us know what you think.

16.a React.js

Module 1 · Media Course's Objectives
Module 2 · Media What is React?
Module 3 · Media Create React App
Module 4 · Media Import Install React
Module 5 · Media Create a react component
Module 6 · Media Render HTML or JSX
Module 7 · Media Rendering component to DOM
Module 8 · Media Rendering multiple elements
Module 9 · Media Render a single outer element
Module 10 · Media React fragments
Module 11 · Media JavaScript Injection
Module 12 · Media Conditional rendering
Module 13 · Media Dynamic rendering
Module 14 · Media Components' Props
Module 15 · Media Props.children
Module 16 · Media Prop Types
Module 17 · Media Using Prop Types
Module 18 · Media React events
Module 19 · Media The bind method
Module 20 · Media Refs
Module 21 · Media Manage state in React
Module 22 · Media Decompose
Module 23 · Flowchart React siblings components
Module 24 · Media Parent component's structure
Module 25 · Media Change state functionality
Module 26 · Media Changing parent's state through Form
Module 27 · Media Depict parent's state You are here
Module 28 · Media Create a react todo app

Close the course

Module 27 of 28 · Media

Depict parent's state

Kostas Diakogiannis

Show parent component's current state through props

Great! Now anytime the value of the input field changes, we change the corresponding value in the <App /> component's state!

Then the next step is to use this value to depict it from another component that has access to this state.

We pass the value of the state as a prop to the <ShowUserInfo /> component and then we use this info inside it to display it to the user.

There you made it!

You created two siblings components and nested them side by side inside a parent (the app) component, then both have access to the state you created to the parent component. The first has the power to execute the function that changes a specific variable of the state, and the other one depicts this change anytime it occurs.

Depict parent's state

16.a React.js

Instructions

Feedback

What do you think of the new look?