grammatical adjustment on line 12 (#28189)

guide/english/react/state-vs-props/index.md

@@ -1,83 +1,83 @@
----
+---
-title: State vs Props
+title: State vs Props
----
+---
-## 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.
+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 the component itself, meaning it is private. As I only can change my age, no one else can.
+* 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()`
+* 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:
-
+
-#### Person.js
+#### Person.js
-
+
-```javascript
+```javascript
-  import React from 'react';
+  import React from 'react';
-
+
-  class Person extends React.Component{
+  class Person extends React.Component{
-    constructor(props) {
+    constructor(props) {
-      super(props);
+      super(props);
-      this.state = {
+      this.state = {
-        age:0
+        age:0
-      this.incrementAge = this.incrementAge.bind(this)
+      this.incrementAge = this.incrementAge.bind(this)
-    }
+    }
-
+
-    incrementAge(){
+    incrementAge(){
-      this.setState({
+      this.setState({
-        age:this.state.age + 1;
+        age:this.state.age + 1;
-      });
+      });
-    }
+    }
-
+
-    render(){
+    render(){
-      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>
-      );
+      );
-    }
+    }
-  }
+  }
-
+
-  export default Person;
+  export default Person;
-```
+```
-In the above example,  `age` is the state of `Person` component. 
+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 when it is instantiated.
+* 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:
-
+
-#### Person.js
+#### Person.js
-
+
-```javascript
+```javascript
-  import React from 'react';
+  import React from 'react';
-
+
-  class Person extends React.Component{
+  class Person extends React.Component{
-    render(){
+    render(){
-      return(
+      return(
-        <div>
+        <div>
-          <label>I am a {this.props.character} person.</label>
+          <label>I am a {this.props.character} person.</label>
-        </div>
+        </div>
-      );
+      );
-    }
+    }
-  }
+  }
-
+
-  export default Person;
+  export default Person;
-
+
-  const person = <Person character = "good"></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.
+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.
+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.
+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 !!!
+Happy Coding !!!