Context API

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

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

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

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

export default () =>{
    const [state,setState] = useContext(AppContext);

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

export default () => {
  const [state, setState] = useContext(AppContext);
  return ( <p>{state.name}</p> );
}
← Problema usando useState y setTimeout
Redux en React →

Aviso Legal | Política de privacidad