La API de contexto es una característica incorporada en React que permite que los datos pasen a través del componente sin tener que pasarlos prop por prop manualmente a cada nivel. Es útil para compartir datos que pueden considerarse “globales” para un árbol de componentes en React.
Aquí te dejo un ejemplo de cómo puedes utilizar la API de Contexto en React:
Primero, tienes que crear un contexto utilizando `React.createContext()`.
```javascript
const MyContext = React.createContext(defaultValue);
```
Característica de `MyContext`:
- `MyContext.Provider` – Es un componente que permite a los componentes secundarios suscribirse a cambios de contexto.
- `MyContext.Consumer` – Nos permite consumir el contexto más cercano.
El siguiente paso sería envolver los componentes que necesitan el valor de este contexto con un componente `Provider`.
```javascript
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ‘Hello World‘
};
}
En tu componente secundario, deberás usar el componente `Consumer` para poder acceder a los datos de tu `Provider`.
```javascript
class ChildComponent extends React.Component {
render() {
return (
{value}}
}
```
Dentro de este componente `Consumer`, tienes una función que recibe el valor actual del contexto del `Provider` más cercano y puede devolver un elemento React. Eso es lo que se va a renderizar.
A partir de React 16.8, Con los hooks puedes usarlo directamente en tu componente funcional con `useContext`.
```jsx
import React, { useContext } from ‘react’;
const ChildComponent = () => { const value = useContext(MyContext); return
Y eso es todo. Ahora sabes cómo utilizar la API de contexto en React. Es una forma muy eficaz de compartir valores que necesitan ser observados por varios componentes en el árbol de componentes.
