Data Handling in React
If you’re reading this, you’ve already done your homework and are probably interested in understanding more about Reactjs.
So let’s cut to the chase: how can data be handled in react using Props and States?
ReactJS is one of the most popular JavaScript libraries for building user interfaces and it was created by Facebook.
There are two major ways data can be managed or handled in React and they are Prop and State. Understanding how they both work will be a huge leap toward learning React.
In this article, we are going to discuss
- Briefly about components.
- The characteristics of both prop and state.
Before diving into this let’s briefly discuss a key part of react, Components.
What are Components?
A component in react lets you split the elements or sections of your UI into independent, reusable pieces, and think about each piece separately.
An example would be if we were to develop Instagram, the like button, the comments, the share, the feed all would be individual components.
The components of React will get rendered or displayed if there is any change in state or props. Every component has a state and it’s only used to store values while Props are used to pass data from parent component to child component.
Parent and Child
You’ve probably heard people say things like you look so much like your dad, mom or even your grandparents. This is cause the child inherited their parent’s features such as hair color, complexion, etc.
I don’t think you’ve heard someone say the parent inherited some features from the child.
Now let’s relate it to this article.
As mentioned earlier data in Reactjs flows from parent to child as parents can’t inherit from their children
The parent passes the information down as “props”, (the properties) to the child file.
Keep reading, props are discussed better later in the article.
Functional Component
function Mango() {
return
Hello, I love Mangos.
;}
These types of components are called “function components or functional components” because they are JavaScript functions.
Functional components are shorter and the implementation of setState() in functional-based components is shorter, easier, and with less boilerplate code. They are also easier to understand.
More on setState() later in the article
Class Component
import React from “react”;
class Mango extends React.Component {
render() {
return
Hello, I love Mangos.
;}
}
As seen in the above code all class components must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions.
Now we understand what components are, let us get into Props.
What are Props?
Props simply mean properties and they are generally used to pass data from one component to another or from one parent component to its child component.
Characteristics of Props:
- Props pass from parent to child component as React’s data flow between components is uni-directional.
- Props are set for the children.
- Props are read-only.
- Props are used in both functional and class components.
“Props are Read-Only”
Props are immutable. Meaning once props are set they can not be changed or modified.
A component must never modify its own prop even if it was declared as a function or a class.
Example:
Consider this sum function:
function sum(a, b) {
. return a + b;
}
Functions similar to the above are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.
State
State is only used to store the internal values or property of a component, which affects that component only. When the state changes the component had to render again. Unlike prop, state can be modified but they cannot be passed from one component to the other. State should not be modified directly, it is modified with a special method called setState( ).
Using the this.state.propertyname syntax you can refer to state anywhere in the component.
Characteristics of State:
- State is initialized inside the component’s constructor method.
- State typically can only be used in class components but with the introduction of React hooks can be used in functional components as well.
- State can not be accessed from outside of the component but the value can be passed via props.
Example:
class GreetingComponent extends React.Component {
constructor(props) {
super(props);
this.state = { name: “Olajumoke” };
}
render() {
return
Hello, {this.state.name}
;}
}
Let’s update the state variable using setState()
class GreetingComponent extends React.Component {
constructor(props) {
super(props);
this.state = { name: “Olajumoke” };
}
componentDidMount() {
// following code updates the state
// your component will call the render method
// so that your changes can be seen in your dom
this.setState({ name: “Laurel” });
}
render() {
return
Hello, {this.state.name}
;}
}
Quick Summary
So far we have learnt a lot about props and states. We now know that props cannot be changed while states on the other hand can be changed using a special method called setState().