Context API Syntax

Functional Components

Component where the context is defined and which provides the actual component with the context.

const functionalComponent = () => {

…
return(
<>
<contextName.Provider value = “contextValue“>
<ComponentThatUsesTheContext />
</contextName.Provider>
</>
)
}

Component where the context is to be used (uses useContext hook)

 const ComponentThatUsesTheContext = () => {
 const {contextUser} = useContext(contextName);
 …
 return(
 <>
 {contextUser}
 </>
 )
 }

Class Components

Creating context

const contextName = React.createContext();
const contextProvider = contextName.Provider;
const contextConsumer = contextName.Consumer;
export {contextProvider , contextConsumer }

Component where the context is defined and which provides the actual component with the context.

import contextProvider;

class classComponent extends React.Component{
render(){
return(
<>
<contextProvider value = “contextValue“>
<ComponentThatUsesTheContext />
</contextProvider>
</>
)
}
}

consumer ->

import contextProvider;

class ComponentThatUsesTheContext extends React.Component{
render(){
return(
<>
<contextConsumer>
{(contextTaken) => {
return(
<>
contextTaken
</>
)
}
}
</contextConsumer>
</>
)
}
}