Categories

Sunday, February 5, 2023
+919814419350 therichposts@gmail.com
Reactjs

Reactjs Share Data Between Components Method 3 : Context Hook

Reactjs Share Data Between Components Method 3 : Context Hook
658

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
Live Demo

For reactjs new comers, please check the below link:

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

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.