Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Estou tentando declaram o this.props.children so que está apresentando um erro, segue o erro:
alguem tem ideia do que pode ser?
meu codigo abaixo:
import React from 'react';
import style from 'Botao.module.scss';
class Botao extends React.Component {
render() {
return (
<button className={style.botao}>
{this.props.children}
</button>
)
}
}
export default Botao;(Está idêntica ao do professor)
Olá, Cleverton! Tudo bom?
Vi que você esqueceu de colocar o ./ na importação do estilo do botão. Você precisa importar os estilos do botão como?
import style from './Botao.module.scss'
ao dar com Ctrl + space, ele abre uma gama de opções mais não o children
Coloquei o "./" e mesmo assim não funcionou, eu acredito que o problema esteja relacionado ao meu PC, pois VScode em outra maquina e estava reconhecendo o children.
Meu pc estava apresentando varios problemas que eu acredito está relacionado ao Sistema operacional (Windows), tive problema ao instalar react na maquina (https://cursos.alura.com.br/forum/topico-erro-ao-tentar-usar-create-react-app-x-213153), tive problema ao instalar o sass, o terminal dava not found. Estou migrando pro linux pra vê se resolve
Depois dá um feedback aqui, estou com o mesmo problema ao tentar usar this.props.children
Marcelo, Coloca o parametros <any, any> que da certo (Acredito que não seja uma boa pratica, todavia para fins educativos torna-se uma solução temporaria, caso queira saber mais sobre React Children with TypeScript - https://www.carlrippon.com/react-children-with-typescript/)
import style from "./square.module.scss";
import React from "react";
class Square extends React.Component <any, any>{
constructor (props: any) {
super (props);
this.state = {
value: null,
}
}
render(){
return (
<button className={style.square} onClick={() => console.log('Foi Clicado')}>
{this.props.children}
</button>);
}
}
export default Square;
Cleverton , obrigado deu certo
Valeu!
Opá, passando só para dizer que aqui no meu código eu tive o mesmo erro. A sua solução @Cleverton Teixeira me ajudou também! Valeu! Talvez fosse interessante a galera da Alura atualizar esse curso.
Ao invés de colocar <any, any> vocês também podem optar por usar: React.Component<{ children: any }>. No meu caso ele não encontrou essa definição de children no objeto
Eu estava com o mesmo problema, e a solução do Cleverton deu certo.
import React from 'react'; import style from './Botao.module.scss';
class Botao extends React.Component <any, any> { render() { return ( ) } }
export default Botao;