React Context API

import React, { useState } from 'react'

const GlobalStateContext = React.createContext({ })

export const GlobalStateProvider = ({ children }) => {
    const [config, setConfig] = useState({
        projectInfo: ''
    })
    const [projectFile, setProjectFile] = useState('./test.cpp')
    const [executionState, setExecutionState] = useState("NoProject")

    return (
        <GlobalStateContext.Provider
            value={{
                executionState,
                config,
                projectFile,
                setExecutionState,
                setConfig,
                setProjectFile,
            }}
        >
            {children}
        </GlobalStateContext.Provider>
    )
}

export default GlobalStateContext

Source: stackoverflow.com

Context Api in react

// In App.js 
<NoteState>
	components where you want to use this context which you created    
</NoteState>

// In NoteContext.js 
import { createContext } from "react";

const NoteContext = createContext();

export default NoteContext;

// In NoteState.js or whatever name you want to give
import NoteContext from "./NoteContext";

const NoteState = (props)=>{
  // you can also pass state here also or functions also 
    const user = {
        name: "Gourav Khurana",
        age: 19,
        caast: "General"
    }
    return (
        <NoteContext.Provider value={user}>
            {props.children}
        </NoteContext.Provider>
    )
}
export default NoteState;


This is all about Context API how to create it and add it to Components 

Now how to use it in the Components :- 
  
import React, { useContext } from 'react';
import NoteContext from "../contexts/notes/NoteContext";

const About = () => {
    const contextValue = useContext(NoteContext);
    return (
       you can simply use here. 
    )
}

export default About

Similar codes

0 vote108 views1 answer
How to add react.memo in export list
Javascript React
0 vote127 views1 answer
React native npm run start port
Javascript React
0 vote129 views1 answer
React native anination 2 valuse
Javascript React
106 votes145 views2 answers
React npm build
Javascript React
3 votes122 views1 answer
React bootstrap card
Javascript React
13 votes161 views3 answers
React native conditional rendering
Javascript React
0 vote115 views1 answer
Error: Error: Unable to resolve module `react-native-gesture-handler` from `node_modules\@react-navigation\native\lib\module\Scrollables.js`: react-native-gesture-handler could not be found within the project.
Javascript React
3 votes119 views4 answers
Add new array at the back of react state
Javascript React
0 vote128 views1 answer
React native getting old navigation parameter
Javascript React
0 vote122 views1 answer
React strap documentation
Javascript React