[REACT Context] #React

REACT JS Context.js

//Context.js
import React, { createContext, useState, ... } from "react"

export const MyContext = createContext()
const MyContextProvider = ({children}) => {
...
//Aquí se manejan u obtienen los datos
...
return(
<MyContext.Provider
	value={{
		variableX: ...,
		variableY: ...,
	}}
>
    {children}
</MyContext.Provider>)
}
export default MyContextProvider

//---

//App.js
import MyContextProvider from "./myContext"
...
<MyContextProvider>
    <App />
</MyContextProvider>
...


//---
//Components.js
import React, { useContext } from 'react';
import { MyContext } from "./myContext"
// ...

function Components() {
  const context = useContext(MyContext);
  return <div>The answer is {context.variableX}.</div>;
}

//--
//Otra forma de obtener los datos
<MyContext.Provider>
	<MyContext.consumer>
    	{context => <ComponenteContain variableX={context.variableX} ... />}
	...