Context API

./src/pages/login.jsimport React,{useRef,useContext} from 'react';
import {AppContext} from '../context/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;
./src/pages/show-state.jsimport React, { useContext } from 'react';
import { AppContext } from '../context/provider';

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

export default ShowState;
./app.jsimport React from 'react';
import MyProvider from './context/provider';
import ShowState from './pages/show-state';
import LogIn from './pages/login';

function App() {
  return (
    <MyProvider>
      <LogIn />
      <ShowState />
    </MyProvider>
  );
}

export default App;
./src/context/provider.jsimport 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();
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.