React Props and State
Tags: react, props, state, javascript
Published: 2020-12-29 21:59:23

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

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

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

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

**App.js**
```jsx
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**.

*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**
```jsx
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**
```jsx
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**
```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;
```
Whenever the state keyword is used in a class component, it's a reserved keyword. 

{% stackblitz react-owadcf %}

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:

{% codepen https://codepen.io/techstack/pen/oNzEOez %}
**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.