Passing state to props in React

The main objective of this post is to learn how to pass state data into props and display it on the User interface but, we will also learn how to return an HTML element from your own component to the User interface. Here we will create a component named UserOutput.js and import it inside our App.js file. Inside this UserOutput.js file we will create a function which returns multiple HTML elements to be displayed on User interface. Inside these elements we will access a props sent to our component by App.js which is props.userName. But we will do it little differently, instead of hard coding the value of a props we will send the value from state and will access that while sending to props like this {this.state.username}. Note that username is our state. This way we can set multiple state variables and then send it to props as we like.

App.js


UserOutput.js