A brief explanation of State, Props and how they work together in React.

When we start building React Apps, we begin with constructing components. But once we understand that, we start grappling with bigger problems React aims to solve.

The biggest one being the transferring of data within our front-end UI’s. To be successful in doing this we need to introduce State and Props.

While State and Props are different, they are both responsible for passing, rendering and storing data. Each has a more specific role when it comes to those tasks, but knowing that State and Props work together to manage and distribute data is priority number one.

Before we can see State and Props working together, let’s quickly review what each one does:

State

Simply put, State is the data that our components can hold and pass to other components. In broader terms, it’s the data we have stored in our application that we want to display to our UI.

This data can come from, user input, APIs or custom data we define. Any of these will be used to dynamically update our interfaces. Whether that’s toggling the display or rendering text content, our data will dictate the functionality of our app.

A useful analogy I’ve been taught is to think of the State as the heart of our application. By storing our data, it will later pump this information to our components for rendering, thus giving our application life. But how will they get there?

Props

Props are how we pass state from one component to another. They are the “blood” of our application, as they pass the necessary data from one component to another.

However, props are immutable, meaning although we reference them the only way we can update them is in the component where we declare our State - this is done through the setState method, which you can learn about here.

All in all, Props work with State by being the vehicles that pass data to our components.

State and Props In Action

While these brief descriptions might help contextualize State and Props, the best way to understand them is to see them in action.

Below we’ve created a basic stateful App component that passes State, via Props, to be rendered in a separate Header component.

//Importing React
import React, {Component} from 'react;
//Creating our App Class
class App extends Component {
  constructor(){
  super();
  //Setting our State
  this.state = {
    title: "Let's pass some State around using Props",
  };
 }
 render(){
  return(
    <div className="App">
      <h1>Our React App </h1>
      //Passing our State via Props    
      <Header title={this.state.title}/>
    </div> 
  )
 }
}
//Building our Header Component
const Header = props =>{
 //Run a console log to see our props
 console.log('Our Props:', props);
 return(
   <h2>{props.title}</h2>
 )
}
// Rendering our Application
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
**Warning: Before using this snippet remove the added comments, they are not formatted correctly for a React enviornment**

A breakdown of what is happening:

1. We import React to our file.
2. We then create our React App Class
3. In our class, we create local State using our constructor. We assign it this.state.
4. There we assign our title value the string "Let's pass some State around using Props".
5. We then render and return our App component.
6. Within our App component, we render our Header component.
7. On our Header component, we pass our title, that is declared in our local State, using Props. The syntax for passing state to a component goes as follows: title: {this.state.title}.
8. We then build our functional Header component, where our title will be passed as Props.
9. We can then access our Props object and use our title prop to populate our Header’s text.
10. Then at the very bottom, we render our full Application in our index.html root div.

A lot of steps there, but I hope that irons out the relationship between State and Props. Again, we’re using State to declare and store our data, and then rely on Props to pass State to our other components.

As we grow as react developers, the data we store in our State can become more complex and robust, but to get us started we went with some basic content. In the future, we could store an array from an API call or a boolean that will dictate whether our content is visible. The data possibilities are endless!

If this still doesn’t help clarify their relationship I recommend checking out the React documentation for State and Props.

If you need a more direct source, feel free to reach out to me. I can be found in the comment section or on Twitter! As always good luck, and happy coding!