<h1 id="heading-props-and-state">Props and state</h1>
<h2 id="heading-props">Props</h2>
<p>Props stand for "properties", props is an object which holds the values of attributes of a tag, props are immutable, which means we can not change the value of props, props give way to pass data from one component to another component.</p>
<h3 id="heading-how-to-access-props">How to access props?</h3>
<p>Suppose we have passed the name as a prop.</p>
<p>➖In functional "<a target="_blank" href="http://props.name">props.name</a>",</p>
<p>➖In class component "<a target="_blank" href="http://this.props.name">this.props.name</a>"</p>
<h2 id="heading-state">State</h2>
<p>The state is an updatable structure that is used to contain data or information about the component, The state in a component state can changed over time, because of user actions.</p>
<p>◽ Defining state ➖We define a state inside a constructor</p>
<p><code>this.state ={ name : "Adarsh" }</code></p>
<p>◽ for access <code>{</code><a target="_blank" href="http://this.state.name"><code>this.state.name</code></a><code>}</code></p>
<p>◽ for update <code>this.setState({name : "Rahul"})</code></p>
<p><strong>In a functional component, we use a hook for managing the state.</strong></p>
<h3 id="heading-difference-between-props-and-state">Difference between Props and State</h3>
<p><strong>Props</strong></p>
<p>➖ Props get passed to the component.</p>
<p>➖ Props are immutable.</p>
<p>➖ Props In functional component =&gt; e.g <a target="_blank" href="http://props.name">props.name</a>;</p>
<p>➖ Props In class component =&gt; e.g <a target="_blank" href="http://this.props.name">this.props.name</a>;</p>
<p><strong>State</strong></p>
<p>〰 State is managed within the component.</p>
<p>〰 State can be changed.</p>
<p>〰 State In functional component =&gt; with the help of useState hook</p>
<p>〰 State in class component =&gt; this.state</p>
<hr />


# Props and state

## Props

Props stand for "properties", props is an object which holds the values of attributes of a tag, props are immutable, which means we can not change the value of props, props give way to pass data from one component to another component.

### How to access props?

Suppose we have passed the name as a prop.

➖In functional "[props.name](http://props.name)",

➖In class component "[this.props.name](http://this.props.name)"

## State

The state is an updatable structure that is used to contain data or information about the component, The state in a component state can changed over time, because of user actions.

◽ Defining state ➖We define a state inside a constructor

`this.state ={ name : "Adarsh" }`

◽ for access `{`[`this.state.name`](http://this.state.name)`}`

◽ for update `this.setState({name : "Rahul"})`

**In a functional component, we use a hook for managing the state.**

### Difference between Props and State

**Props**

➖ Props get passed to the component.

➖ Props are immutable.

➖ Props In functional component =&gt; e.g [props.name](http://props.name);

➖ Props In class component =&gt; e.g [this.props.name](http://this.props.name);

**State**

〰 State is managed within the component.

〰 State can be changed.

〰 State In functional component =&gt; with the help of useState hook

〰 State in class component =&gt; this.state

---