# React State Events Handling — 2

###### *This article is sponsored by [Flutterwave](https://dashboard.flutterwave.com/signup?referrals=RV686851) - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!*

---
In the previous article, we saw how a class-based function uses a `state` property to hold the current Person object values but gets overridden by the `setState` method upon a click of the button. That is, the `state` property object gets updated to the `setState` method objects upon a click.

Below was how the code looked like:

**Person/Person.js**
```jsx
import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ]
  };

  personHandler = () => {
    this.setState({
      persons: [
        { name: 'Andela', language: 'Ember', id: '2sdr3' },
        { name: 'John', language: 'Backbone', id: 'de6c3' },
        { name: 'Mary', language: 'Angular', id: 'c1z3x' }
      ]
    })
  };

  render() {
    return (
      <div>
        <Person
          name={this.state.persons[0].name}
          language={this.state.persons[0].language}
          id={this.state.persons[0].id} />
        <Person
          name={this.state.persons[1].name}
          language={this.state.persons[1].language}
          id={this.state.persons[1].id} />
        <Person
          name={this.state.persons[2].name}
          language={this.state.persons[2].language}
          id={this.state.persons[2].id} />
        <button 
          onClick={this.personHandler}>Change Person State</button>
      </div>
    );
  }
}

export default App;
```

The `PersonHandler` is just a function call that gets executed whenever there's a click on the button.

---
### React Hooks
Classed-based components in the past were the only way to manage the state property, but there is now a new approach to manage it. With a new feature in React 16.8 called, **React hooks **  you can now manage components in a functional component.

> React Hooks is the collection of functions that you can use in functional components.

The `useState` is the most important React Hook. Importing `useState` (not `Component`) from the React library, you manage state in a functional component successfully. The`useState` is an object that holds the initial (current) values or data of a component.
The second state will be a function that allows state updates in the functional component.

In the example below, array destructuring is used to hold the current state values and final state values. 

See the example below:
```jsx
import React from 'react';
import { useState } from 'react';
import './App.css';
import Person from './Person/Person';

const App = () => {
  const [initialPersonState, finalPersonState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ]
  })

  const personHandler = () => {
    finalPersonState({
      persons: [
        { name: 'Andela', language: 'Ember', id: '2sdr3' },
        { name: 'John', language: 'Backbone', id: 'de6c3' },
        { name: 'Mary', language: 'Angular', id: 'c1z3x' }
      ],
    })
  };

  return (
    <div>
      <Person
        name={initialPersonState.persons[0].name}
        language={initialPersonState.persons[0].language}
        id={initialPersonState.persons[0].id} />
      <Person
        name={initialPersonState.persons[1].name}
        language={initialPersonState.persons[1].language}
        id={initialPersonState.persons[1].id} />
      <Person
        name={initialPersonState.persons[2].name}
        language={initialPersonState.persons[2].language}
        id={initialPersonState.persons[2].id} />
      <button
        onClick={personHandler}>Change Person State</button>
    </div>
  );
};

export default App;
```

Although I prefer to use `state` and `setState` as conventional names array elements if it is only one React hook or `useState` method in the functional component.

 In the code above replace the `initialPersonState` and `finalPersonState` everywhere in the *Person/Person.js* file  to `state` and `setState`:

```jsx
import React from 'react';
import { useState } from 'react';
import './App.css';
import Person from './Person/Person';

const App = () => {
  const [state, setState] = useState({
    persons: [
      { name: 'Bello', language: 'React', id: '2sdr3' },
      { name: 'Michael', language: 'Vue', id: 'de6c3' },
      { name: 'Mary', language: 'Angular', id: 'c1z3x' }
    ]
  });

  const personHandler = () => {
    setState({
      persons: [
        { name: 'Andela', language: 'Ember', id: '2sdr3' },
        { name: 'John', language: 'Backbone', id: 'de6c3' },
        { name: 'Mary', language: 'Angular', id: 'c1z3x' }
      ],
    })
  };

  return (
    <div>
      <Person
        name={state.persons[0].name}
        language={state.persons[0].language}
        id={state.persons[0].id} />
      <Person
        name={state.persons[1].name}
        language={state.persons[1].language}
        id={state.persons[1].id} />
      <Person
        name={state.persons[2].name}
        language={state.persons[2].language}
        id={state.persons[2].id} />
      <button
        onClick={personHandler}>Change Person State</button>
    </div>
  );
};

export default App;
```

*Note*
- The `UseState` returns an array of exactly two elements, the initial state, and the final state. The element's name can be named anything but descriptive.

- You can have multiple `useState` calls in React hooks.

**This just an eye-opener of React Hooks. It will be explained further later in a separate article.**

%[https://react-state-events-handling.glitch.me]

**Happy Coding!!!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/bellotech)

---
#### Techstack | Flutterwave 
Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!  Also, you get a Flutterwave dollar barter card when you [signup](https://dashboard.flutterwave.com/signup?referrals=RV686851). Open an online store and take your business anywhere in the world.

%[https://youtu.be/ClXVUM3Rf7A]

[Sign up today to get started](https://dashboard.flutterwave.com/signup?referrals=RV686851)

[Support](https://dashboard.flutterwave.com/donate/3lo9klliqwbu) what I do and push me to keep making free content.