Context API @&01 Introduction Context API is a solution for a more elegant way of passing data between components by creating global variables, without the need to pass props down the component three manually TO GET STARTED: create a react app: npx create-react-app context-app Add context folder with color-contex.js inside areal JS color-context.js Add components folder with two Yano) Rilo areola lela) JS component-a.js JS component-b.jsoy. What we are building We will be able to access global color variable and change it directly from the components: ComponentA hello world change Easel crenoe 0 blue ComponentB selected color: blue switch jp blue0s) color-context.js Let's create our global state inside the color-context,js file import { createContext, useState } from 'react'; Sige aa eee ame Mogae ad ee selectedColor : null, onColorChange: (newColor) => {}, 2) Coe ee ERM ROLE Gesell ae Ora ee ene const [color, setColor] = useState('red') CORR iC i eaComea eC co 2 iearecoaa 1a Prva een ara onColorChange: handleColorChange, asta eM ieee aed e ee UR thea Sed {children} See Le Tae Lh atie et Led02) Wrap our App Now in order to use the color content in our application - we need to wrap our App with the ColorProvider ST aaa Ce) ge orf ce Cote el et FU amy 2 rece SU ga eZ import {ColorContextProvider} from './context/color-context'; const root = ReactDOM.createRoot (document.getElementById('root')); rhea (iat EO eaeeyae Cetels o ent irednetaae et ted EN ed Kenge aes a NBL OL taeesae tad ah05 Component A Let's take a look at an example how we could access and modify global state in component-a.js import { useContext } from "react"; import { ColorContext } from "../context/color-context"; const ComponentA = () => { const colorCtx = useContext(ColorContext) ; Tae as elem ele Seem eae cate Ps SMa AC CSAC CLM eae Lee TAG Take} Aled onColorChange( 'green') }> Ce Cm mT Cu) eT colicd onColorChange( ‘blue’ ) }> change to blue SA The li Cree Coe Mea ene06 Component B Let's also take a look at a similar example where we could use our newly created color context in a different component import { useContext } from "react"; ST aa Lge rsa ae Ree MRL ae ce NC Leto aay const ComponentB = () => { Cate eas eee reed eles) Crane ac ee ene eel laaed c.g ebay eat ee Tae elo Leas (La Pa Pa en SEL) a2 > BIA E hr Ree as Mote ee ke eA onColorChange( 'blue') }> switch to blue Pac yea dk + export default ComponentB;