Part1 Code:-
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>
)
}
Top comments (0)