Não consegui entender bem o que está sendo ensinado no curso, estou realizando exatamente igual ao professor, porém está apresentando erros.
Segue o código.
import { Button } from "@material-ui/core";
import { Container, Titulo, InputContainer } from "./styles";
import { Input, InputLabel, InputAdornment } from "@material-ui/core";
import { useHistory } from "react-router-dom";
import { UsuarioContext } from "common/context/Usuario";
function Login() {
const history = useHistory();
return (
<Container>
<UsuarioContext.Consumer>
{({nome, setNome, saldo, setSaldo}) => (
<>
<Titulo>Insira o seu nome</Titulo>
<InputContainer>
<InputLabel>Nome</InputLabel>
<Input
value={nome}
onChange={(evento) => setNome(evento.target.value)}
type="text"
/>
</InputContainer>
<InputContainer>
<InputLabel>Saldo</InputLabel>
<Input
type="number"
value={saldo}
onChange={(evento) => setSaldo(evento.target.value)}
startAdornment={
<InputAdornment position="start">R$</InputAdornment>
}
/>
</InputContainer>
<Button
variant="contained"
color="primary"
onClick={() => history.push("/feira")}
>
Avançar
</Button>
</>
)}
</UsuarioContext.Consumer>
</Container>
);
}
export default Login;
Erros
TypeError: Cannot destructure property 'nome' of '_ref' as it is undefined. children C:/Users/Allan/React/react-context/src/pages/Login/index.js:12 9 | return ( 10 | 11 | <UsuarioContext.Consumer>
12 | {({nome, setNome, saldo, setSaldo}) => ( | ^ 13 | <> 14 | Insira o seu nome 15 | View compiled ▶ 16 stack frames were collapsed. Module. C:/Users/Allan/React/react-context/src/index.js:19 16 | } 17 | }) 18 | 19 | ReactDOM.render( 20 | <React.StrictMode> 21 | 22 | View compiled ./src/index.js http://localhost:3000/static/js/main.chunk.js:773:30 webpack_require C:/Users/Allan/React/react-context/webpack/bootstrap:851 848 | 849 | webpack_require.$Refresh$.init(); 850 | try { 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | webpack_require.$Refresh$.cleanup(moduleId); 854 | } View compiled fn C:/Users/Allan/React/react-context/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } 150 | return webpack_require(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled 1 http://localhost:3000/static/js/main.chunk.js:2215:18 webpack_require C:/Users/Allan/React/react-context/webpack/bootstrap:851 848 | 849 | webpack_require.$Refresh$.init(); 850 | try { 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | webpack_require.$Refresh$.cleanup(moduleId); 854 | } View compiled checkDeferredModules C:/Users/Allan/React/react-context/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); 45 | result = webpack_require(webpack_require.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | View compiled Array.webpackJsonpCallback [as push] C:/Users/Allan/React/react-context/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:85