Context API

Contactar con el profesor

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 React from 'react';
import MyProvider from './application/provider';
import ShowState from './pages/showstate';
import LogIn from './pages/login';

const App = _ => {
  return (
    <MyProvider>
      <LogIn />
      <ShowState />
    </MyProvider>
  );
}

export default App;
./src/application/provider.js
import React,{createContext,useState} from 'react';

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

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

const LogIn=()=>{
    let nom = useRef(null);

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

    return( <input type="text" ref = {nom} 
            onChange={ () => {setState({name:nom.current.value})}} />
    );
}

export default LogIn;
Descargar ejercicio resuelto
./src/pages/showstate.js
import React, { useContext } from 'react';
import { AppContext } from '../../application/provider';

const ShowState = () => {
  const [state, setState] = useContext(AppContext);
  return ( <p>{state.name}</p> );
}

export default ShowState;
← Fetch API (axios)
Redux →

Aviso Legal | Política de privacidad