Table of Content
- Introduction
- What is Props?
- Disadvantages of Props?
- Props in the Constructor
- What is State
- Creating the State object
Introduction:
In this article we are going to discuss about the Props and State of the React components.
What is Props?
In React Properties are shortly referred to as Props, they are used to pass data between React components. React data flows from component to component in unidirectional, basically from parent to child. Props are read-only components, so we cannot change the data from inside the component.
Example:
{/*Parent Component*/}
class Pen extends React.Component
{
render(){
return
(
{this.props.brand} is best Pen
);
}}
{/*Child Component*/}
class Reynolds extends React.Component
{
render()
{
return
(
This is a good example for Props
);
}
}
ReactDOM.react(, document.getElementById(‘root’));
Output:
This is a good example for Props
Reynolds is the best Pen.
Disadvantages of Props:
- We can't change the data.
- It is used only to read.
Props in the Constructor:
If your function has a constructor, you want to pass the props in the constructor and its super method.
Syntax:
class Car extends React.Component
{constructor(props){
super(props)
};
render()
{
return
(
I am a {this.props.model}
);
}}
ReactDOM.react(, document.getElementById(‘root’));
Output:
I am a Mustang
What is State?
The state is a built-in React object that holds data or information about the component. So like props, we cannot pass data to components using state, but they can create and manage it internally.
- A component state can change over time.
- Whenever it changes, the component re-renders.
- The change in state can happen as a response to user action or system-generated events and these changes determine the behaviour of the component and how it will render.
Creating the State Object
The State object is initialized using constructor().
Example
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: " Mustang",
color: "red",
year: 1964
}
render() {
return (
div>
My {this.state.brand}
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
);
}
}
ReactDOM.render(
Output:
My Ford
It is a red Mustang from 1964.
Changing the State object:
To change a value in the state object, we need to use the this.setState() method.
Example:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
changeColor = () => {
this.setState({color: "blue"});
render() {
return (
My {this.state.brand}
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
type="button"
onClick={this.changeColor}
);
}
}
Output:
Note: There is a content(My Ford and It is a red Mustang from 1964.) and button (Change color) is displayed on the screen.
After clicking the button (Change color) The content (It is a red Mustang from 1964.) is changed to (It is a blue Mustang from 1964.)
I attached the following image below.
Difference Between React Props and State:
|
State |
Props |
|
State are useful to store the data of the components. |
Props are used to pass data and event handlers to the child components. |
|
State hold the data and can change over time |
Props are immutable, once props are set, it cannot be changed. |
|
State used only in class components |
Props used in both functional and class components |
|
Event handlers generally update state |
The Parent component set props for the child component. |
Conclusion:
Props is used to pass the data from parent component to child component. But we can't able to change the data in props. With the help of State we can change the data in the component. I hope this article will be helpful to understand about Props and State in React JS.
