# Handling State in React

## Handling Component State in React

State is an extraordinarily important concept. Any time **a componen**t needs to be in charge of **maintaining its own information** (to be specific being **passed that information** from a **parent component** via `props`), we'll use `state`.

`props` are immutable and `props`  data can't be changed. Hence, we use `state`  to change data within components.

{% tabs %}
{% tab title="App.js" %}

```jsx
import React from "react"

class App extends React.Component {
    constructor() {
        // Inherit Properties from React.Component 
        super()
        
        // Initializing State
        this.state = {
            answer: "Yes"
        }
    }
    
    // Process Logic & Display Output
    render() {
        return (
            <div>
                // Fetching State Property
                <h1>Is state important to know? {this.state.answer}</h1>
            </div>
        )
    }
}

export default App
```

{% endtab %}

{% tab title="index.js" %}

```javascript
import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
&#x20;`state` is a `JS object`and can only be used in **class-based components**.
{% endhint %}

## Conditional Rendering with State

We can render component's `state` with conditional&#x73;*.*

{% tabs %}
{% tab title="App.js" %}

```jsx
import React, {Component} from "react"

class App extends Component{
    constructor(){
        // Inherit Properties from React.Component
        super()
        
        // Initializing State
        this.state = {
            isLoggedIn : true
        }
    }
    
    // Process Logic & Display Output
    render(){
        // Conditional Logic
        let status
        if(this.state.isLoggedIn === true){
            status = "in"
        }else{
            status = "out"
        }
        
        // Output
        return(
            <div>
                <h1>You are currently logged {status}</h1>
            </div>  
        )
    }
    
}

export default App

```

{% endtab %}

{% tab title="index.js" %}

```javascript
import React from "react"
import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}
