React State Event Handling — 1

React State Event Handling — 1

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article
This article is 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!

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:

Person/Person.js

import React from 'react';

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

export default Person;

This was what we had in the article, React Props and State.

index.css

body {
  background-color: #f0f0f0;
}

App.css

.App {
  margin: 20px auto;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  line-height: 1.7; 
  width: 12.375rem;
  font-family: sans-serif;
  background-color: #fff;
}

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

button {
  display: block;
  margin: 0 auto;
  padding: 10px;
  background-color: #fff;
}

App.js

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 Person object values to change upon a click.

App.js

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 } object 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. That is, it updates the DOM upon a click. Hence the attribute, onClick={this.personHandler} to reach out to the setState() object when a click is successful.

Also, because we need to update the DOM upon a click of a button, the personHandler is a function within which is the setState method.

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

More of React State Handling in the next article

Happy Coding!!!


Buy me a Coffee


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. Open an online store and take your business anywhere in the world.

Sign up today to get started

Support what I do and push me to keep making free content.

 
Share this

Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.

Proudly part of