DEV Community

loading...
Cover image for React Props and State

React Props and State

bello profile image Bello Updated on ・4 min read
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!
Note this article is the continuation of the previous article

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

See below:

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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; */
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

Note: 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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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 there's no logic that 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

bello image

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.

Discussion (0)

pic
Editor guide