Update index.md (#24710)

This commit is contained in:
fgkolf
2018-12-13 13:38:06 +02:00
committed by Manish Giri
parent e3eeafb601
commit 02200898da

View File

@ -3,14 +3,14 @@ title: State vs Props
--- ---
## 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:
* State is something that a component owns. It belongs to that particular component where it is defined. * 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. 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. * 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 a state by using `this.setState()` * You can change the state by using `this.setState()`
See the below example to get an idea of state: 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( return(
<div> <div>
<label>My age is: {this.state.age}</label> <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> </div>
); );
} }
@ -49,7 +49,7 @@ In the above example, `age` is the state of `Person` component.
## Props: ## 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. * Props are immutable. They are read-only.
See the below example to get an idea of Props: See the below example to get an idea of Props: