# Manipulating State in React

## Using `setState` to Change State

State by itself isn't very useful unless it can be changed. But unlike`props`which are **immutable**,`state` was **intended to be changed** whenever necessary. However, you should **never directly change**`state`, but instead should use the`setState` method to do so.

We can change the component's **initial state** to a **new** **state** with *`setState`* method.

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

```jsx
import React from "react"

class App extends React.Component {
    constructor() {
        super()
        // Initializing State
        this.state = {
            count: 0
        }
        // Binding Our Class Method to App Class
        this.handleClick = this.handleClick.bind(this)
    }
    
    // Class Method
    handleClick(){
        // Keeping the Old Version of State and Generating a New Version of State
        this.setState((prevState) => {
            // `{}` is used with a `return` statement since a object has been returned 
            return {
                // prevState Represents Old Version of State
                count: prevState.count + 5
            }
        })
    }
     
    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.handleClick}>Change!</button>
            </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;*`setState`*&#x69;s a method Inherited from *`React.Component`*
{% endhint %}
