React State Events Handling — 1
Tags: state, events, react, javascript
Published: 2020-12-30 22:11:08

###### *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!*

The state is managed in a class-based component. Although the functional component, with the props property, will be a template-like component to accept data from the class component in a separate file. 

> State property is used in a class component to detect changes when an event is fired. Such a component is called a *stateful component* or *smart component*

See the example below:

**App.js**
```jsx
import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
        </div>
    );
};

export default Person;
```

This was what we had in the article, [React Props and State](https://techstack.hashnode.dev/react-jsx). 

**App.css**
```css
.App {
  margin: 20px auto;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  line-height: 1.7; 
  display: flex;
  width: 9.375rem;
  font-family: sans-serif;
}

.App:hover {
  box-shadow: 0 1px 2px 3px #eee;
  transform: scale(1.01);
}

button {
  display: block;
  margin: auto;
  padding: 10px;
}
```

**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 = {
    person: [
      { name: 'Bello', language: 'React' },
      { name: 'Michael', language: 'Vue' },
      { name: 'Mary', language: 'Angular' }
    ]
  }
  render() {
    return (
      <div>
        <Person name={this.state.person[0].name} 
                language={this.state.person[0].language} />
        <Person name={this.state.person[1].name} 
                language={this.state.person[1].language} />
        <Person name={this.state.person[2].name} 
                language={this.state.person[2].language} />
      </div>
    );
  }
}

export default App;
```
We've been hard coding so far, but what if we want changes in the DOM only when an event is fired. Let's modify the above code to allow the state property in the app.

**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;
```

In the code snippet above, the `state` property holds the current Person object values in the class. Also, when `React` and `{ Component }` were imported from the `react` module, we had access to a couple of methods like the `setState()` method. The set state method is responsible for overriding the Person object in the state whenever an event is fired, like clicking a button. 

Since React uses the camelCase naming convention, the React elements attribute `onClick` is used instead of the `onclick` event type in Vanilla JavaScript.

{% stackblitz react-s7iabq %}

**More of React State Handling in the next article**

**Happy Coding!!!**

<a href="https://www.buymeacoffee.com/bellotech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

{% user bello %}

#### 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.

{% youtube 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.