react useContext() Hook - web dev simplified

Part1 Code:-

Folder Structure :-

Output Photo :-

App.js Code:-

import { createContext, useState } from 'react'
import FunctionContextComponent from './FunctionContextComponent'
import ClassContextComponent from './ClassContextComponent'

export const ThemeContext = createContext();

export default function App() {
  const [darkTheme, setDarkTheme] = useState(true);

  // eslint-disable-next-line
  const [timepass, setTimepass] = useState("initialState");

  function toggleTheme() {
    setDarkTheme(prevTheme => !prevTheme);
  };

  return (
    <ThemeContext.Provider value={{ darkTheme, timepass }}>
      <button onClick={toggleTheme}>Toggle Theme</button> - {darkTheme ? "true" : "false"}

      <FunctionContextComponent />
      <ClassContextComponent />
    </ThemeContext.Provider>
  )
}

FunctionContextComponent.js :-

import { useContext } from 'react'
import { ThemeContext } from './App';

export default function FunctionContextComponent() {
    const theme = useContext(ThemeContext);

    const style = {
        backgroundColor: theme.darkTheme ? "grey" : "white",
        color: theme.darkTheme ? "white" : "black",
        padding: "2rem",
        margin: "2rem"
    }

    return (
        <div style={style}>
            Function Theme
        </div>
    )
}

ClassContextComponent.js :-

import React, { Component } from 'react'
import { ThemeContext } from './App'

export default class ClassContextComponent extends Component {
    style(dark) {
        return {
            backgroundColor: dark ? "#123445" : "white",
            color: dark ? "white" : "black",
            padding: "2rem",
            margin: "2rem"
        }
    }

    render() {
        return (
            <ThemeContext.Consumer>
                {(theme) => {
                    return <div style={this.style(theme.darkTheme)}> ClassContextComponent </div>

                }}
            </ThemeContext.Consumer>
        )
    }
}

Part2 Source Code

Folder Structure

index.js code :-

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ThemeContext } from "./Theme.js";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ThemeContext>
    <App />
  </ThemeContext>
);

// 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();

App.js Code :-

import { createContext, useState, useContext } from 'react'
import FunctionContextComponent from './FunctionContextComponent'
import ClassContextComponent from './ClassContextComponent'

import { ThemeContext, ThemeContext1 } from "./Theme.js";


export default function App() {

  const theme = useContext(ThemeContext1);
  return (
    <>
      <button onClick={theme.toggleTheme}>Toggle Theme</button>

      <FunctionContextComponent />
      <ClassContextComponent />
    </>
  )
}

FunctionContextComponent.js

import { useContext } from 'react'
import { ThemeContext1 } from './Theme';


export default function FunctionContextComponent() {
    const theme = useContext(ThemeContext1);

    const style = {
        backgroundColor: theme.darkTheme ? "grey" : "white",
        color: theme.darkTheme ? "white" : "black",
        padding: "2rem",
        margin: "2rem"
    }

    return (
        <>

            <div style={style}>
                Function Theme
            </div>
        </>
    )
}

ClassContextComponent.js

import React, { Component } from 'react'
import { ThemeContext1 } from './Theme'

export default class ClassContextComponent extends Component {
    style(dark) {
        return {
            backgroundColor: dark ? "#123445" : "white",
            color: dark ? "white" : "black",
            padding: "2rem",
            margin: "2rem"
        }
    }

    render() {
        return (
            <ThemeContext1.Consumer>
                {(theme) => {
                    return <div style={this.style(theme.darkTheme)}> ClassContextComponent </div>

                }}
            </ThemeContext1.Consumer>
        )
    }
}

Theme.js Code

import { useState, createContext, useContext } from 'react';

export const ThemeContext1 = createContext();

export function ThemeContext(props) {
    const [darkTheme, setDarkTheme] = useState(true);

    // eslint-disable-next-line
    const [timepass, setTimepass] = useState("initialState");

    const toggleTheme = () => {
        return setDarkTheme(prevTheme => !prevTheme);
    };

    return (
        <ThemeContext1.Provider value={{ darkTheme, toggleTheme, timepass }}>
            {props.children}
        </ThemeContext1.Provider>
    )
}

Thank You.
You can follow us on:
Youtube
Instagram