React Props and State

React Props and State

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!

Before reading this article, I made a little modification to the App.css file.

See the example below:

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: 9.375rem;
  font-size: 1rem;
  font-family: sans-serif;
}

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

Props

We've seen the usage of Props in the previous articles. Here we'll focus more on State. Below is a summary of what props are all about:

  • Props are properties as a parameter in the template-like functional components.

Person/Person.js

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;

The props parameter is a conventional name. It can be named anything. Try replacing the name props in the Person/Person.js file to name properties or something else.

  • Props are also properties as a parameter in the template-like class components.

First, comment-out the program in Person/Person.js file :

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

In the App.js file, override the previous code with the one shown below:

App.js

import React from 'react';
import { Component } from 'react';
import './App.css';
// import Person from './Person/Person';

class Person extends React.Component {
  render() {
    return (
      <div className="App">
        <h3>Name: {this.props.name}</h3>
        <h3>Skill: {this.props.language}</h3>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <Person name='Bello' language='React' />
        <Person name='Michael' language='Vue' />
        <Person name='Mary' language='Angular' />
      </div>
    );
  }
}

export default App;

The example above shows props in a class component. The next question maybe is where did we define the property props?

When the props keyword is used in a class component, it's a reserved keyword referred to the class, Person. If you try replacing the name props in the App.js file to name properties or something else, you get errors.

Class has properties, and one of the properties of a class component is props

By importing Components, we also imported a couple of properties but only used props. this.props refers to the class Person, inherited by React.Component.

  • Props makes a component static.

  • It is recommended to have more stateless components than stateful components.


State

Another property apart from props in a class component is state. A state is a property like a variable in a class.

Below is a summary of what state are all about:

  • A state is a property as a parameter in the template-like class components. For now, the full feature of the state property won't be used because changes are made in a stateful component when an event is fired.

See the example below:

Undo the last change in the Person/Person.js file.

Person/Person.js

import React from 'react';

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

export default Person;

Also, Undo the last change in the App.js file.

App.js

import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  render() {
    return (
      <div>
        <Person name='Bello' language='React' />
        <Person name='Michael' language='Vue' />
        <Person name='Mary' language='Angular' />
      </div>
    );
  }
}

export default App;

In the App.js file, override the code with the code shown below:

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;

Whenever the state keyword is used in a class component, it's a reserved keyword.

The state here is like a variable in the class referring to the person object

It's still static though because no logic allows a functional component like the button to listen to events and get the DOM updated whenever there's a click.

That's why class components with logic are called smart, stateful, or container components.


Conclusion

  • Stateless components should be used more often, where each component has its function in separate files. This takes advantage of React as it comes with webpack to bundle split-up files. This makes your code more readable, easier to debug, and maintain.

  • Stateful components should be reserved for logic but more stateful components than stateless components.

See the example below:

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