Props And State In React

Introduction

In this article, We will discuss props and state in react and how to use the props and state in components. We will see how to use props and state in class and functional components. So let's started first with brief details and code examples. 

In this series, we are learning about basic react js concepts. This article is about the props and state and how to use those in react components.

Props are used to pass data from one component to another component as parameters and by using props we passed data from the parent to the child component(unidirectional flow). props are read-only (immutable) and they can not change in component. 

As you can see below app.js file we write this code to render our components and pass some properties like name, address and data object to the child component.

App.js

import FunctionalComponent from './FunctionalComponent'

function App() {
  return (
    <div className="App">
      <ClassComponent name="John" address="India" data={{age:26,"dept":"IT"}} />
      <br/>
      <FunctionalComponent   name="Peter" address="Canada" data={{age:27,"dept":"Finance"}}   />
    </div>
  );
}
export default App;

In the class component, We have to use the props keyboard to access those properties in the component that we are passing from the parent component.

ClassComponent.js

import React, {Component} from "react";
  
class ClassComponent extends Component {
    render() {
        return  <h1>This is {this.props.name} (Address- {this.props.address} Age- {this.props.data.age} Department- {this.props.data.dept})  </h1>;
    }
}
export default ClassComponent;

In the functional component, We have to get the props values as parameters to access those properties in the component and then we can easily access those properties.

FunctionalComponent.js

import React from "react";

function FunctionalComponent(prop)
{
    return (
        <h1>This is {prop.name} (Address- {prop.address} Age- {prop.data.age} Department- {prop.data.dept})  </h1>
    );
};
export default FunctionalComponent;

We have done the changes in both components. Now once we run the application, We can see the below output.

State is used to access data inside the component and it's private and only accessible in the component level. We can change the state values by events, life cycle methods and hooks within the component. The states in the class component are able to use directly by the state keyboard but in the functional components, We need to useState hook.

In the class component, we need to create a constructor and then we can easily use the state with state keyboard like below. As you can see first set a default value inside the constructor and display. We have created one button, Once you click on that button we can see the state value has been changed. 

ClassComponent.js

import React, {Component} from "react";
  
class ClassComponent extends Component {
    constructor()    {
        super();
        this.state= {name:"David"};
    }
    changeName= ()=>
    {
        this.setState({'name': 'Alex'})
    }
    render() {
        return  (
        <div>
        <h1>Welcome {this.state.name} </h1>
         <button onClick={this.changeName}>Click here for state change</button> 
         </div>
        )
    }
} 
export default ClassComponent;

In the functional component, we have used one react hook which is useState. With the help of useState we can easily use state in the functional component. We pass the initial state to this function and it returns a variable with the current state value and another function that updates this value. Once we click on the button we can see the state value has been changed using the setName method.

FunctionalComponent.js

import React ,{useState} from "react";

function FunctionalComponent()
{
    const [name, setName] = useState("James");
    const changeName= ()=>{
    setName("Roy");
    }
    return (
        <div>
        <h1>Welcome {name}  </h1> 
        <button onClick={changeName}>Click here for state change</button> 
        </div>      
    );
};
  
export default FunctionalComponent;

We can see the below output with default state values.

Once we clicked on the button we can see the state value has been changed and this output in the browser.

The super function is used to call the constructor of the parent class. It returns an object which represents the parent class.

• Routing in React

Summary

In this article, We have learned about props and states in react and how to use them in class components and functional components in react. I hope now you understand about props and state in react, Thank you for reading this article.