Hoe gebruik ik de Context API in Reactjs?

De Context API is een functie van ReactJS die het makkelijker maakt om data door te geven door de component hiërarchie zonder de noodzaak om props door elk niveau handmatig door te geven.

Hier is een basis voorbeeld hoe je de Context API kunt gebruiken:

1. Creëer een context

React biedt een methode genaamd createContext waarmee je een Context object kunt maken.

```
import React from ‘react’;

const MyContext = React.createContext(defaultValue);
```

1. Provider gebruiken

De React component die data beschikbaar moet maken voor andere componenten wordt ingesloten in een Provider component.

```

```

1. Consumer gebruiken

Iedere component die de data nodig heeft moet ingesloten worden in een Consumer component.

```
{value => /* render iets op basis van de context waarde */}

```

Hier is een compleet voorbeeld:

```
// Context creëren
import React from ‘react’;
const MyContext = React.createContext();

class MyProvider extends React.Component { state = { message: “Hello, World!” }

render() { return ( this.setState({ message: value }) }}> {this.props.children} ) } }

class MyApp extends React.Component { render() { return ( {(context) => (

{context.state.message}

)} ) }
}

// in de render methode van het root component

```

In dit voorbeeld gebruiken we de MyProvider component om de state en de bericht-update functie beschikbaar te maken voor elk kind component in de hiërarchie. De MyApp component maakt gebruik van MyContext.Consumer om toegang te krijgen tot deze waarden. Het toont de huidige staat en bevat een knop die de bericht-update functie aanroept om de staat te veranderen.