2.1 KiB
2.1 KiB
title |
---|
State vs Props |
State vs Props
When we start working with React components, we frequently hear two terms. These are state
and props
. So, in this article we will explore what those are and how they differ.
State:
- State is something that a component owns. It belongs to that particular component where it is defined. For example, A person's age is a state of that person.
- State is mutable. But it can only be changed by the component itself, meaning it is private. As I only can change my age, no one else can.
- You can change the state by using
this.setState()
See the below example to get an idea of state:
Person.js
import React from 'react';
class Person extends React.Component{
constructor(props) {
super(props);
this.state = {
age:0
this.incrementAge = this.incrementAge.bind(this)
}
incrementAge(){
this.setState({
age:this.state.age + 1;
});
}
render(){
return(
<div>
<label>My age is: {this.state.age}</label>
<button onClick={this.incrementAge}>Grow me older !!</button>
</div>
);
}
}
export default Person;
In the above example, age
is the state of Person
component.
Props:
- Props are similar to method arguments. They are passed to a component when it is instantiated.
- Props are immutable. They are read-only.
See the below example to get an idea of Props:
Person.js
import React from 'react';
class Person extends React.Component{
render(){
return(
<div>
<label>I am a {this.props.character} person.</label>
</div>
);
}
}
export default Person;
const person = <Person character = "good"></Person>
In the above example, const person = <Person character = "good"></Person>
we are passing character = "good"
prop to Person
component.
It gives output as "I am a good person", in fact I am.
There is lot more to learn on State and Props. Many things can be learnt by actually diving into coding. So get your hands dirty by coding.
Happy Coding !!!