Data Handling In React Components Using State And Props

Here, I am trying to explain the fundamentals of how the data gets handled, using state and props in React components. These are some cool features that React provides.

State and props

There are basically two ways in which the data gets handled in React. It gets handled through state and props. In another way, it can be said that two types of Model in React are there to manage the data for the components. Both state and props are plain JavaScript objects.

If there is any update in state or props, the component will automatically get rerendered and DOM will be updated. If there is no change, then DOM doesn’t get touched at all.

How does it happen behind the scenes? React manages a Virtual DOM. Thus, whenever any change happens in state or props, it compares the changes between Virtual DOM and actual DOM. If there are changes, it will update the affected nodes in a most efficient way, else it does not even touch DOM or the component.

State

Thus, what is state? Each component in React has its own state. If I give an example of an email client, an inbox is considered as a state and compose panel is another state.

State is only used to store the internal values of a component, which affects that component only. States are mutable.

Value of the state can be assigned directly by assigning a value to this.state or by using this.setState method. Assigning value using this.state is only allowed in the constructor function. For further updating of state, it can be done using this.setState.

Props

Props are generally used to pass the data from the parent component to the child component. Props act as a communication channel between the components, which always move from parent component to child component. As recommended, all props are read-only and components should never modify their own props.

The code given below shows.

How to set the value in state, using this.state in the constructor.
How to change the value in state, using this.setState method.
How parent component passes the values to child component and how child components populates the data passed from parent component.

CustomPanel.js

import React, { Component } from 'react';
import PanelHeader from './PanelHeader';
import PanelBody from './PanelBody';
export default class CustomPanel extends Component
{
constructor(props)
{
super(props);
this.state = {
title: "Custom Panel Title",
text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eget rutrum est. Vestibulum sapien ante, ornare quis ullamcorper in,
ultricies vitae nibh.
Vivamus ex sapien, interdum id ipsum sed, vehicula gravida justo.
Quisque fringilla rutrum nulla, vitae fringilla lacus dictum non.`
}
}
handleClick()
{
this.setState({
title: "New Title",
text: "Changed Body text"
})
}
render()
{
return(
<div>
<PanelHeader title={this.state.title} />
<input type="button" value="Change State" onClick={this.handleClick.bind(this)} />
<hr/>
<PanelBody text={this.state.text} />
</div>
)
}
}

PanelHeader.js

import React, { Component } from 'react';
export default class PanelHeader extends Component
{
render()
{
return(
<h3>{this.props.title}</h3>
)
}
}

PanelBody.js

import React, { Component } from 'react';
export default class PanelBody extends Component
{
render()
{
return (
<div>{this.props.text}</div>
)
}
}