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);
}
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.
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;
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 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!!!
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.
Support what I do and push me to keep making free content.
Top comments (0)