Update index.md (#24710)
This commit is contained in:
@ -3,14 +3,14 @@ title: State vs Props
|
||||
---
|
||||
## State vs Props
|
||||
|
||||
When we start working with React components, we frequently hear two terms. They are `state` and `props`. So, in this article we will explore what are those and how they differ.
|
||||
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 be changed by only by that component that owns it. As I only can change my age, not anyone else.
|
||||
* You can change a state by using `this.setState()`
|
||||
* State is mutable. But it can be changed by only 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:
|
||||
|
||||
@ -37,7 +37,7 @@ See the below example to get an idea of state:
|
||||
return(
|
||||
<div>
|
||||
<label>My age is: {this.state.age}</label>
|
||||
<button onClick={this.incrementAge}>Grow me older !!<button>
|
||||
<button onClick={this.incrementAge}>Grow me older !!</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -49,7 +49,7 @@ In the above example, `age` is the state of `Person` component.
|
||||
|
||||
## Props:
|
||||
|
||||
* Props are similar to method arguments. They are passed to a component where that component is used.
|
||||
* 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:
|
||||
|
Reference in New Issue
Block a user