Reactjs Share Data Between Components Method 3 : Context Hook

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Share Data Between Components Method 3 : Context Hook.

Guys in this demo we will do below things:

1. Create demo react project
2. Add bootstrap 5 inside it
3. Add react router dom functionality
4. Use of Context to share data between react components

For reactjs new comers, please check the below link:

• Reactjs Basic Tutorials

Guys here is the working code snippet for Reactjs Share Data Between Components Method 3 : Context Hook and please follow carefully:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

npx create-react-app reactdemo

cd reactdemo

npm i bootstrap

npm i @popperjs/core

npm install react-router-dom --save

npm start // run the project

2. Guys create file Context.js inside src folder and below code in that file:

import React, { useState } from "react";

export const Context = React.createContext();
export const ContextProvider = ({ children }) => {
  const [items, setItems] = useState(0);

  return (
    <Context.Provider value={{ items, setItems }}>
      {children}
    </Context.Provider>
  );
};

3. Now guys we need to add below code inside src/index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ContextProvider } from './Context';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <ContextProvider>
    <App />
  </ContextProvider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4. Now guys create Home.js file inside src folder and add below code inside that file:

import React, { useContext } from "react";
import { Context } from "./Context";

function ComponentTwo() {
  
  const { items, setItems } = useContext(Context);
  
  const clickHandler = () => {
    setItems((prevcount) => prevcount + 1);
  };
  
  const clickHandlerOne = () => {
    setItems((prevcount) => prevcount - 1);
  };
  
  return (
    <div className="container p-5">
      <button className="btn btn-primary me-3" onClick={clickHandler}>Increase</button>
       Count:<strong>{items}</strong>
      <button className="btn btn-primary ms-3" onClick={clickHandlerOne}>Decrease</button>
      
    </div>
  );
}

export default ComponentTwo;

5. Now guys create About.js file inside src folder and add below code inside that file:

import React, { useContext } from "react";

import { Context } from "./Context";

function About() {
  
  const { items, setItems } = useContext(Context);
  
  
  return (
    <div className="container p-5">
      
      Updated new value Count:<b>{items}</b>
      
    </div>
  );
}

export default About;

6. Now guys create Header.js file inside src folder and add below code inside that file:

import "bootstrap/dist/css/bootstrap.min.css";
import { Link } from "react-router-dom";
import React, { useContext } from "react";

function Header() {
  
    return (
       <div className="header">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <Link class="navbar-brand" to={{ pathname: "/"}}>Therichpost</Link>
                
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                    <Link class="nav-link active" to={{ pathname: "/"}}>Home</Link>
                    
                    </li>
                    <li class="nav-item">
                    <Link class="nav-link" to={{ pathname: "/about"}}>About</Link>
                   
                    </li>

                  
                    
                </ul>
               
                </div>
            </div>
            </nav>
        </div>
    );
}
export default Header;

7. In the end guys we need to add code inside App.js file:

import Header from './Header'; //Include Header
import About from './About';
import Home from './Home';
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from "react-router-dom";

function App() {
  return (
    <div className="App">
        
        <BrowserRouter>
          <Header></Header>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/about" element={<About />} />
             
            </Routes>
        
        </BrowserRouter>
     
    </div>
  );
}

export default App;

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks