[Dúvida] [Solução] Property 'children' does not exist on type 'Readonly<{}>'

Olá pessoal, esse tópico é para caso você assim como eu, passe por esse problema já saber o que pode ter acontecido.

Obtive o erro acima no seguinte código:

class Botao extends React.Component {
  render() {
    return (
      <button className={style.botao}>
        {this.props.children}
      </button>
    )
  }
}

Primeiro, caso seu arquivo esteja com a extensão .tsx, alterando para .jsx pode resolver, porém não é a melhor forma já que estamos trabalhando com o Typescript.

Adicione o seguinte código para resolver o problema seguindo o padrão do Typescript:

interface IProps {
  children: React.ReactNode;
}

class Button extends React.Component<IProps> {
  render() {
    return (
      <button className={style.botao}>
        {this.props.children}
      </button>
    )
  }
}

Nesse trecho abaixo, estamos falando para o Typescript que o elemento children tem o tipo React.ReactNode (que é a forma padrão que o react vê a prop children), dessa forma o componente sabe o que esperar pelo trecho {this.props.children}

interface IProps {
  children: React.ReactNode;
}

Como visto na própria aula, devemos passar as props e o seu tipo entre <> logo após o React.Component

class Button extends React.Component<IProps>

Espero que possa ajudar alguém!