What are the differences between "props" and "state" with React?
Props... Properties... State... State... At first, it's always a bit... strange! To avoid any doubts, let's take a look at the differences between props and state in React.
Updated on December 9, 2024
Have you always wondered about the difference between a class-based component and a functional component in React? This recap article is made for you!
Props (properties / JSX attributes)
Props allow us to pass functions/methods and values to components. We primarily use them to pass information.
JAVASCRIPT
<MySubComponent firstName='Eva' lastName='Dupont' />
State
The state allows us to manage data so that we can use it later in our project. It's like giving a brain to our component: it can then modify the state.
In the rest of the training, we will see that we can also have multiple states—you'll see, it's truly very useful!
JAVASCRIPT
state = {
users: {
userA: {
firstName: 'Eva',
lastName: 'Dupont'
}
}
}
State and Props?
Thus, we can manage data with state, and send this data to our components through props.
JAVASCRIPT
state = {
users: {
userA: {
firstName: 'Eva',
lastName: 'Dupont'
}
}
}
<MySubComponent
firstName={this.state.users[0].firstName}
lastName={this.state.users[0].lastName} />Category: Development
