×

iFour Logo

A complete guide on React fundamentals: Props and State

Kapil Panchal - July 07, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
A complete guide on React fundamentals: Props and State

Introduction


When we talk about State and Props, both are considered as variables, but they work for different tasks and purposes. To manage the structure of reacting data props can only pass it by using unidirectional from parent component to child.

What are props?


Props are defined in the parent component as variable and pass the value to the child component. Normally we familiar with C and C++ we define the variable before we must declare the variable. Same as it props are declared on one component (parent) and define in another component(child). Props follow the uni-directional flow (from parent component to child component). We can say that props are read-only components because it just assigns a value and passes the value as parameter.

How to declare props?


Here Details are child component which is imported in a parent component

 

Title its props attribute and my first props are props value

 

We can also pass the array as props using list


const value= [1, 2, 3, 4, 5];

                
 

How to pass the value?


Props are normally used for the set the internal which is based on props value which we define in constructor like that.


class Details extends React.Component {
constructor(props) {
super(props)
console.log(props.title)
}
}

                

We can directly assign in the render method


render {
return (

Suject details:

{this.props.title}

) }

Props never change the value it only passes the value. Props also used to allow the child component to access the method In the parent component. There is a good way to manage the state in the parent component. Every time component will display some kind of information which is based on the props.

Parent Component


import './App.css';
import React from 'react';
import Details from './Details';
class Footer extends React.Component
{
render()
{             
var person =
{
sub1: 'Java',
sub2: 'php',
sub3:'React'
};
const value= [1, 2, 3, 4, 5];
                        
return (
{/* Details component which accepts props */}
 
); } } export default Footer;

Child Component


import React, { } from 'react';
                      
class Details extends React.Component 
{
render() 
{
Const {sub1,sub2,sub3}={...this.props};/// expmple of sperad and rest 
const {a}={...this.props.item}
return(

Suject details:

{this.props.item}

{this.props.title}

  1.  
  2. sub1:{sub1}
  3.  
  4. sub2:{sub2}
  5.  
  6. sub3:{sub3}
  7.  
) }

What is State?


The state is mange the data it can change the data while props never change the data state even set the state of data when we perform any event like button click or input change event we have to set the state of data that time state performs their task for managing the overall data.

How To Update a Component’s State?


State can not be modified directly we have to modify with a special method called setstate()

this.setState=name:’rahi’     //wrong        
this.setState({name: ‘rahi’})    //right
                

What happens when the state changes?


The state will be changed depending on the input when the time input changes then the event will be triggered and that time state is rendered and the state collects the initial value of the state. When the state change reacts then it takes the all information immediately and re-render the DOM only which component gets an update in the state, and that’s why it react faster.

Can we use state in every component?


There are two components, one is the functional component and the second is the class component. The function is also called the stateless component because the function component is only used to define the variable work on the simple task. State is only used in the class component.

But now through the React Hooks, we can use state in function component but compatibility class component is better than function component.

What are the differences between props and state?


Props are used to pass the data while the state is used for manipulate the data and manage the data. Props only read the data while state modified the data and it's modified by its own component another component can’t be accessed by from outside. Props used attribute and value to pass the data while state used state() method.

 
Condition Props State
State can be mutable No Yes
We can set default value inside the component Yes Yes
We can change inside component No Yes
Follow uni-direction Yes No
Can change by parent component Yes No
Used function component No No
It can be change in child component Yes No
Can set default value Yes Yes

Planning to Hire React Developer ? Your Search ends here.

Full development example of props and state



import React, { Component } from 'react';
export default class FormDataComponent extends Component {
userData;
constructor(props) {
super(props);
this.onChangeName = this.onChangeName.bind(this);
this.onChangeEmail = this.onChangeEmail.bind(this);
this.onChangePhone = this.onChangePhone.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
name: '',
email: '',
phone: ''
}
}
// Form Events
onChangeName(e) {
this.setState({ name: e.target.value })
}
onChangeEmail(e) {
this.setState({ email: e.target.value })
}
onChangePhone(e) {
this.setState({ phone: e.target.value })
}
onSubmit(e) {
e.preventDefault()
this.setState({
name: '',
email: '',
phone: ''
})
}
// React Life Cycle
componentDidMount() {
this.userData = JSON.parse(localStorage.getItem('user'));
if (localStorage.getItem('user')) {
this.setState({
name: this.userData.name,
email: this.userData.email,
phone: this.userData.phone
})
} else {
this.setState({
name: '',
email: '',
phone: ''
})
}
}
componentWillUpdate(nextProps, nextState) {
localStorage.setItem('user', JSON.stringify(nextState));
}
render() {
return (
) } }

Conclusion

In this blog, what we have learned is about props and state with examples for each. We have also discussed the task and their purposes. How they are different from each other and in what way they are similar. We also discussed their performance and compatibility. Through this practical blog, you will get a complete idea about all these topics.

A complete guide on React fundamentals: Props and State Table of Content 1. Introduction 2. What are props? 3. How to declare props? 4. How to pass the value? 5. What is State? 6. How To Update a Component’s State? 7. What happens when the state changes? 8. Can we use state in every component? 9. What are the differences between props and state? 10. Full development example of props and state 11. Conclusion Introduction When we talk about State and Props, both are considered as variables, but they work for different tasks and purposes. To manage the structure of reacting data props can only pass it by using unidirectional from parent component to child. What are props? Props are defined in the parent component as variable and pass the value to the child component. Normally we familiar with C and C++ we define the variable before we must declare the variable. Same as it props are declared on one component (parent) and define in another component(child). Props follow the uni-directional flow (from parent component to child component). We can say that props are read-only components because it just assigns a value and passes the value as parameter. How to declare props? Here Details are child component which is imported in a parent component   Title its props attribute and my first props are props value   We can also pass the array as props using list const value= [1, 2, 3, 4, 5];   How to pass the value? Props are normally used for the set the internal which is based on props value which we define in constructor like that. class Details extends React.Component { constructor(props) { super(props) console.log(props.title) } } We can directly assign in the render method render { return (Suject details: {this.props.title} ) } Props never change the value it only passes the value. Props also used to allow the child component to access the method In the parent component. There is a good way to manage the state in the parent component. Every time component will display some kind of information which is based on the props. Read More: Explain Authentication In React Application Parent Component import './App.css'; import React from 'react'; import Details from './Details'; class Footer extends React.Component { render() { var person = { sub1: 'Java', sub2: 'php', sub3:'React' }; const value= [1, 2, 3, 4, 5]; return ( {/* Details component which accepts props */}  ); } } export default Footer; Child Component import React, { } from 'react'; class Details extends React.Component { render() { Const {sub1,sub2,sub3}={...this.props};/// expmple of sperad and rest const {a}={...this.props.item} return(Suject details: {this.props.item} {this.props.title}  sub1:{sub1} sub2:{sub2} sub3:{sub3}  ) } What is State? The state is mange the data it can change the data while props never change the data state even set the state of data when we perform any event like button click or input change event we have to set the state of data that time state performs their task for managing the overall data. How To Update a Component’s State? State can not be modified directly we have to modify with a special method called setstate() this.setState=name:’rahi’ //wrong this.setState({name: ‘rahi’}) //right What happens when the state changes? The state will be changed depending on the input when the time input changes then the event will be triggered and that time state is rendered and the state collects the initial value of the state. When the state change reacts then it takes the all information immediately and re-render the DOM only which component gets an update in the state, and that’s why it react faster. Can we use state in every component? There are two components, one is the functional component and the second is the class component. The function is also called the stateless component because the function component is only used to define the variable work on the simple task. State is only used in the class component. But now through the React Hooks, we can use state in function component but compatibility class component is better than function component. What are the differences between props and state? Props are used to pass the data while the state is used for manipulate the data and manage the data. Props only read the data while state modified the data and it's modified by its own component another component can’t be accessed by from outside. Props used attribute and value to pass the data while state used state() method.   Condition Props State State can be mutable No Yes We can set default value inside the component Yes Yes We can change inside component No Yes Follow uni-direction Yes No Can change by parent component Yes No Used function component No No It can be change in child component Yes No Can set default value Yes Yes Planning to Hire React Developer ? Your Search ends here. See here Full development example of props and state import React, { Component } from 'react'; export default class FormDataComponent extends Component { userData; constructor(props) { super(props); this.onChangeName = this.onChangeName.bind(this); this.onChangeEmail = this.onChangeEmail.bind(this); this.onChangePhone = this.onChangePhone.bind(this); this.onSubmit = this.onSubmit.bind(this); this.state = { name: '', email: '', phone: '' } } // Form Events onChangeName(e) { this.setState({ name: e.target.value }) } onChangeEmail(e) { this.setState({ email: e.target.value }) } onChangePhone(e) { this.setState({ phone: e.target.value }) } onSubmit(e) { e.preventDefault() this.setState({ name: '', email: '', phone: '' }) } // React Life Cycle componentDidMount() { this.userData = JSON.parse(localStorage.getItem('user')); if (localStorage.getItem('user')) { this.setState({ name: this.userData.name, email: this.userData.email, phone: this.userData.phone }) } else { this.setState({ name: '', email: '', phone: '' }) } } componentWillUpdate(nextProps, nextState) { localStorage.setItem('user', JSON.stringify(nextState)); } render() { return ( Name Email Phone Submit ) } } Conclusion In this blog, what we have learned is about props and state with examples for each. We have also discussed the task and their purposes. How they are different from each other and in what way they are similar. We also discussed their performance and compatibility. Through this practical blog, you will get a complete idea about all these topics.
Kapil Panchal

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.

Build Your Agile Team

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 
Blog Our insights
How Spatial Data Analysis Improves Healthcare
How Spatial Data Analysis Improves Healthcare

Do you know when geospatial analysis took traction in healthcare? It was when John Snow, a London-based physician, used it to analyze the spread of cholera, which ultimately proved...

4 Types of Power BI Dashboards: Analytical, Strategic, Operational, and Tactical
4 Types of Power BI Dashboards: Analytical, Strategic, Operational, and Tactical

One interesting aspect you truly love about Power BI, as a CTO, is how it lets you step back and see the bigger picture of your business. Isn’t it? Without getting bogged down in minute...

Power Apps Integration Challenges: Expert Insights & Solutions
Power Apps Integration Challenges: Expert Insights & Solutions

Power Apps Integration Challenges: Insights from 11 Experts Microsoft Power Apps has caught great hype in recent days. Why? because it helps you build apps 50% faster, saves 250+...