How To Share Data Between Components In React

Introduction

In this article, we will learn how to share data between one component to another component in React Application 

Steps to follow,

Now we will start by creating a new project. 

Step 1

Create a React project setup using the below commands or however, you create your React app. 

npx create-react-app projectname

Example

npx create-react-app sample-sharedata 

Step 2 - Installing React Bootstrap

Open a new terminal and run the following below commands. 

Install Bootstrap as a dependency in your app.

npm install react-bootstrap bootstrap 

In App.js we will import bootstrap.min.css.

import "bootstrap/dist/css/bootstrap.min.css"; 

Step 3

In this article, below are some ways to share data between components, 

• Parent to child component 
• Child to the parent component 

Create Project Folder structure, 

Step 4 - Share data from Parent to Child

In the case of sharing data from parent to child component, we use props. Props data is shared by the parent component and Child component cannot be changed as they are read-only.

src/App.js

import './App.css'; 
import Parent from './Modules/parentChild/parent-component' 
import 'bootstrap/dist/css/bootstrap.min.css'; 
function App() { 
  return ( 
    <div className="App"> 
      <Parent/> 
    </div> 
  ); 
} 
export default App; 

src/ Modules/ParentChild/parent-component.js,

import React from "react";
import Child from "./child-component";
const Parent = () => {
    const dataList = [{
        name: "Robert",
        age: 21,
        role: "Test",
    }, {
        name: "Sat",
        age: 21,
        role: "Test",
    }, {
        name: "mani",
        age: 20,
        role: "Software",
    }, ];
    return ( 
     <div>
      <div class="row m-4 ">
        <h3>Parent To Child</h3>
        <Child dataList={dataList} />
      </div>
    </div>
    );
};
export default Parent;

src/ Modules/ParentChild/child-component.js

import React from "react";
const Child = (props) => {
    return props.dataList.map((item, i) => {
    return (
     <div class="col-4">
      <div class="card">
        <div class="card-body">
          <p class="card-text">{item.name}</p>
          <p class="card-text">{item.age}</p>
          <p class="card-text">{item.role}</p>
        </div>
      </div>
    </div>       
   );
 });
};
export default Child;

Step 5

Now we will run the application. 

Npm run start 

On successful execution of the above command, it will show the browser, 

Step 6 - Share data from Child to Parent

For Parent, component creates a callback Function and its Function gets the data from the child component.

Pass the callback function in the parent component as a prop to the child component.

The child component calls the parent callback function using props.

src/App.js

import './App.css';
import Parent1 from './Modules/childParent/parent1'
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
    return ( 
        <div className="App">
            <Parent1 />
        </div>
    );
}
export default App;

src/ Modules/childParent/parent1.js

import React from "react";
import Child1 from "./child1";
class Parent1 extends React.Component {
    state = {
        name: "",
    };
    handleCallback = (childName) => {
        this.setState({
            name: childName
        });
    };
    render() {
        const {
            name
        } = this.state;
        return ( 
              <div>
                   <h3>Child To Parent</h3>
                   <Child1 parentCallback={this.handleCallback} /> {name}
              </div>
        
        );
    }
}
export default Parent1;

src/ Modules/childParent/child1.js

import React from "react";
class Child1 extends React.Component {
    onTrigger = (event) => {
        this.props.parentCallback(event.target.name.value);
        event.preventDefault();
    };
    render() {
        return ( < 
               <div>
                  <form class="form-inline" onSubmit={this.onTrigger}>
                     <div class="form-group mx-sm-3 mb-2">
                        <label for="inputPassword2" class="sr-only"> FullName </label>
                   <input type="text" class="form-control" name="name" id="inputPassword2" placeholder="Enter FullName" />
                 </div>
             <input type="submit" value="Submit" class="btn btn-primary mb-2" />
           </form>
         </div>
       );
    }
}
export default Child1;

Step 7

Now we will run the application.

Npm run start 

On successful execution of the above command, it will show in the browser,