A complete guide on React fundamentals: Props and State

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

                

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

                

render {
return (
Suject details:
{this.props.title}
)
}

                

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;

                

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}
 
) }

                

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

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
)
}
}

              

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

A passionate Technical writer and an SEO freak working as a Technical Content 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.