Implementing Context of React

Hi, “Context” in React is a great way to have a “source of true” in our application, with this I want to refer to this in the realm of how data flows.

React Context oficial site says that:

“Context provides a way to pass data through the component tree without having to pass props down manually at every level.”

And here and example of React Context in use:

I have a folder called “contexts” and here I’m going to save a file that will hold the Context and also this file will return the context:

So in app.jsx I’m going to create the context using createContext from react and I’m going to call the functional component as AppProvider because this file will work as a “provider” for the entire application:

Provider of what? well we can provide data, methods, constants, states to share with the entire application.

Context:

// Dependencies
import React, { createContext, useState } from 'react' // importing createContext from react

// Creating the context for the application
export const AppContext = createContext({
  state: {}
})

// Calling my functional component as AppProvider
const AppProvider = ({ id, children }) => {
  // States
  const [state, setState] = useState({})
  const [url, setUrl] = useState('')

  // Methods
  const uploadFile = async selectedFile => {
    ...
    return data
  }

  // Insert inside this object all the elements that you want to provide to the entired application
  const context = {
    state,
    uploadFile,
    url
  }

  // Passing the context object to the value and declare {children}
  return <AppContext.Provider value={context}>{children}</AppContext.Provider>
}

export default AppProvider

Nice, the next step is wrap the application with the AppProvider (component that we declared above and have all the logic for of react Context) :

The project App:

// Dependencies
import React from 'react'

// Components
import Header from './components/Header'
import Uploader from './components/Uploader'

// React context
import AppProvider from './contexts/app'

function App() {
  return (
    <AppProvider>
      <Header />

      <Uploader />
    </AppProvider>
  )
}

// export
export default App

Finally, I want to use the uploadFile file method that is in the Context, well in this case we need to use useContext from react in the component that we want to use that method:

Uploader component:

// Dependencies
import React, { useContext } from 'react'

// Importing the Context
import { AppContext } from '../../contexts/app'

const Uploader = () => {
  // Local State
  const [filesInS3, setFilesInS3] = useState(0)

  // Getting the methods, constants that comes from the context that I'm going to use in this component
  const { uploadFile, url } = useContext(AppContext) // useContext() and pass the Context as a parameter

  // Method that use the uploadFile() that comes from the react context
  const handleUpload = () => {
    uploadFile(selectedFile)
    setShowMessage(true)
  }

  return (
    <section className={styles.mainContainer}>
      <section className={styles.uploaderContainer}>
        <p>Hi Im the Uploader component!</p>
      </section>
    </section>
  )
}

export default Uploader

Nice! that is all you need for implement react Context but if you want to check the entire project so that you can guide yourself then check my repository.

By Cristina Rojas.