Context API

Contactar con el profesor

Context API proporciona una forma de compartir datos entre componentes sin pasar props manualmente a todos los niveles.

Nuestro objeto Provider se encargará de hacer visible el objeto que le pasemos para todos los componentes anidados en él.

El valor que recibe el provider, es único. Por eso, si queremos almacenar varios valores, lo que haremos será usar un objeto con múltiples propiedades.

./App.js
import MyProvider from './application/provider';
import ShowState from './pages/showstate';
import LogIn from './pages/login';

export default () => (
    <MyProvider>
      <LogIn />
      <ShowState />
    </MyProvider>
  );
./src/application/Provider.js
import {createContext,useState} from 'react';

export default (props) =>{
    const [state,setState] = useState({});
    return (
        <div>
            <AppContext.Provider value={[state,setState]}>
                {props.children}
            </AppContext.Provider>  
        </div>
        );
    }

export const AppContext = createContext();
./src/pages/Login.js
import {useRef,useContext} from 'react';
import {AppContext} from '../application/provider';

export default () =>{
    let nom = useRef(null);

    const [state,setState] = useContext(AppContext);

    return( <input type="text" ref = {nom} 
            onChange={ () => {setState({name:nom.current.value})}} />
    );
}
./src/pages/Showstate.js
import { useContext } from 'react';
import { AppContext } from '../application/provider';

export default () => {
  const [state, setState] = useContext(AppContext);
  return ( <p>{state.name}</p> );
}
Descargar ejercicio resuelto
← Fetch API y Axios
Redux →

Aviso Legal | Política de privacidad