React Context y LocalStorage en uno Solo!!!

console.log(“Hello Dev”)

Si bien en la clase 5 el profesor Oscar Barajas explica una metodología para usar el React Context. En realidad existen diversas maneras de hacerlo.
Les voy a emplicar la forma como lo hizo @midudev en el curso de React Avanzado
Por si fuera poco, las props se guardarán en el LocalStorage!!!
– Nota –
Antes de empezar, estoy usando styled-components. Para no entrar mucho en detalles, es una libreria que me permite estilar los componentes reemplazando las clases y llamando componentes en lugar de etiquetas html.
Por ello, si se confunden con mi componente Header, les dejo una referencia para aclarar dudas

HeaderContainer == <div>
Button == <button>
Fin Nota

Dicho esto, continuemos …

Creamos un archivo Context.js (puedes ponerle el nombre que quieras)

import React, { createContext, useState } from 'react';

// Exportamos la instancia del objecto Contextexportconst Context = createContext();

// Creamos un componente Provider el cual recibe como props los childrenconst Provider = ({ children }) => {

	//En este ejercicio vamos a crear una props darkMode y a su vez la vamos a guardar en el Local Storage ;)const [darkMode, setDarkMode] = useState(() => {
        const val = window.localStorage.getItem('darkMode');

//La razon de este if es porque cuando obtenemos datos del LS, este viene desde un JSON lo cual se parsea como un String//Pero para mi caso lo quiero como un booleanif (val === 'true') returntrue;
        elsereturnfalse;
    });

//Value es el objeto con los valores y sus respectivas funciones de alteracion de los mismos// Piensa que aqui van a estar todas las props que quieres compartir y las funciones para cambiar sus valoresconst value = {
        darkMode,
        activateDarkMode: (value) => {
            setDarkMode(value);
            window.localStorage.setItem('darkMode', value)
        }
    }
//Finalmente retornamos el componente Context.Provider y la pasamos como props el value (recuerda, son las props globales que queremos en nuestra app)return (
	<Context.Provider value={value}>
            {children}
        </Context.Provider>
    )
}

// Exportamos by defult nuestro componente Provider, pues lo vamos a usar para proveer nuestro Context en la appexportdefault Provider;

Luego en el index.js …

import React from'react';
import ReactDOM from'react-dom';

// importamos nuestro Provider (export default)import ContextProvider from'./Context/Context';
import App from'./App';

// Luego lo proveemos en nuestra app
ReactDOM.render(
  <React.StrictMode>
    <ContextProvider>
      <App />
    </ContextProvider>
  </React.StrictMode>,
  document.getElementById('app')
);

Finalmente en cualquier componente (En este caso Header)

//Importamos el hook useContextimport React, {useContext} from'react'//importamos el objecto Context (importante los {})import { Context } from'../Context/Context';
import {Button, HeaderContainer} from'./styles/Header';
exportconst Header = () =>{

//Le pasamos el objeto Context al hook useContext, de este modo podemos retornar nuestras props globalesconst {darkMode, activateDarkMode} = useContext(Context)

//Alteramos la prop activateDarkMode con su valor contrario//Recuerda que tambien se va a cambiar en el LS :Dconst handleClick = () =>{
        activateDarkMode(!darkMode)
    }
    return (
        <HeaderContainerclassName="Header"><h1>ReactHooks</h1><ButtondarkMode={darkMode}type="button"onClick={handleClick}>{darkMode ? 'Light Mode' : 'Dark Mode'}</Button></HeaderContainer>
    );
}

No olvides comentar y dejar tu like. Me serán muy utiles a la hora de hacer más tutoriales
console.log(“Recuerda que #NuncaParesDeAprender y dile a tu mamá que la amas”)