Solucionado
Meu código não está reconhecendo o campo 'children' das props do component:
Meu component:
import React from 'react';
import style from './Button.module.scss';
class Button extends React.Component {
render() {
return (
<button className={style.botao}>
{this.props.children}
</button>
);
}
}
export default Button;hoje, com a Alura e o Google Gemini
Olá Diego, estou com o mesmo problema, achei essa solução no fórum. https://cursos.alura.com.br/forum/topico-erro-ao-chamar-children-213930
Eu estava com o mesmo problema, altere conforme abaixo:
import React from 'react'; import style from './Botao.module.scss';
class Botao extends React.Component <any, any> { render() { return ( {this.props.children} ) } }
export default Botao;
Qual a função desse <any, any> ???? Estava com mesmo problema e deu certo aqui. Mas só copiar e colar não serve de aprendizado, precisava saber o porque de cada coisa no seu lugar.
Não sei explicar o funcionamento do <any, any>, acredito que na nova versão do React seja necessário explicitar o parâmetros do componente. Estou tendo vários problemas com esse curso, principalmente na instalação de novas dependências, o visual studio sinaliza como "deprecated", ou seja, descontinuada.
Ao invés de colocar React.Component <any, any> é possivel escrever React.Component<{ children: any }> que também funcionará.
Outra solução que pode ser abordada é alterando a extensão do ar "index.tsx" para "index.jsx", talvez esse problema possa ser devido a versões do react. Alterando para JSX, não tem a necessidade de declarar o children: any ou any, any, ou texto: string.
Acho que valeria a pena um desfecho / explicação pra isto aqui. Usei o <{children: any}> , mas acho que não deve ser uma boa prática, mas ainda me pareceu menos estranha que o <any, any>.
Gosto de entender o que estou escrevendo.
Se alguém tiver uma explicação, além de uma solução "palialtiva", compartilha aí.
Bom dia a todos.... Esse projeto é utilizado o Typescript então usar o "Any" é uma má pratica no desenvolvimento pois "Any" aceita qualquer coisa você pode passar uma string, boolean e etc, e com Typescript o correto é especificar o tipo que será utilizado pois evita erros no desenvolvimento por esse motivo não estamos usando o Javascript pois assim podemos detectar erros ainda em desenvolvimento e não somente quando estiver em produção e a propriedade "Children" não aparecer ter haver com a versão que está sendo usado mesmo.