Breaking News: Grepper is joining You.com. Read the official announcement!

react context api with hooks

Gleaming Goat answered on July 3, 2022 Popularity 9/10 Helpfulness 4/10

answer react context api with hooks

react context api with hooks

Comment

//AppContextProvider.js
import React, { createContext, useContext, useState } from 'react';

const AppContext = createContext(undefined);

// Hook to provide access to context object
export const UseAppContext = () => {
  return useContext(AppContext);
};

export const AppContextProvider = (props) => {
  const [apiData, setApiData] = useState([]);
  const globalValue = "Global Value"

  // Assign React state and constants to context object
  const AppContextObject = {
    apiValue:{
          apidata, setApiData
    },
    global:{
          globalValue  
    } 
  };
  return (
    <AppContext.Provider value={AppContextObject}>
      {props.children}
    </AppContext.Provider>
  );
};

// USAGE
// In app.js
<AppContextProvider>
   <App />
</AppContextProvider>

// In Child Component
const {
    global:{
          globalValue  
    },
    apiValue:{
          apidata, setApiData
    }
  } = UseAppContext();

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: api javascript react-context

Link to this answer
Share Copy Link

Contributed on Jul 03 2022

Gleaming Goat

0 Answers Avg Quality 2/10

react context api with hooks

Contents

More Related Answers

react context api with hooks

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.