react useContext() Hook - web dev simplified
Tags: webdev, javascript, react, beginners
Published: 2022-12-20 15:11:22

## Part1 Code:- 

**Folder Structure :-**
![Folder Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvl0tyov7a3flm89l4pv.png)

**Output Photo :-**
![Output Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mqi5b8gyyfcvy7rf11l.png)

**App.js Code:-**
``` react
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 :-**
``` react
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 :-**
``` react
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**

![Folder Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpwppzyst2edv3snf6uk.png)

**index.js code :-**

``` react
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 :-**

``` react
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**

``` react
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**
``` react
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**
``` react
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 ](https://www.youtube.com/c/ULTIMATEPROGRAMMING)
[Instagram](https://www.instagram.com/full_stack_web_developer1/)