[Dúvida] [DÚVIDA] Property 'children' is missing in type '{ texto: string; }' but required in type 'Readonly<{ children: ReactNode; texto: string; }> | React: escrevendo com Typescript

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

Referente ao curso React: escrevendo com Typescript, no capítulo Props e atividade Conhecendo Props

por Samele Parente

| 100.2k xp | 10 posts

Fiz basicamente todas as sugestões de solução, mas sempre aparece um erro no index.tsx do formulario

codigo do index.tsx do botao

import React from "react";
import style from './Botao.module.scss'

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

export default Botao;

index do formulario:

import React from 'react';
import Botao from '../Botao';
import style from  './formulario.module.scss';

class Formulario extends React.Component {
    render(){
        return(
            <form className={style.novaTarefa}>
                <div className={style.inputContainer}>
                    <label htmlFor='tarefa'>
                        Adicione um nove estudo
                    </label>
                    <input 
                    type='text'
                    name="tarefa"
                    id="tarefa"
                    placeholder='O que você quer estudar'
                    required/>
                </div>
                <div className={style.inputContainer}>
                    <label htmlFor='tempo'>
                        Tempo
                    </label>
                    <input 
                    type='time'
                    step="1"
                    name="tempo"
                    id='tempo'
                    min="00:00:00"
                    max="01:30:00"
                    required
                    />
                </div>  
                <Botao 
                    texto ='Adicionar'
                />
            </form>
        )
    }
}

erro que aparece: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

por Gerson dos Reis de Melo

| 179.5k xp | 121 posts

20/06/2023

O erro que você está enfrentando indica que a propriedade 'children' está faltando no componente Botao. Isso ocorre porque você está usando o componente Botao sem passar a propriedade 'children', que é esperada pelo componente Botao.

Para resolver esse problema, você pode passar a propriedade 'children' para o componente Botao, conforme necessário. A propriedade 'children' permite que você renderize conteúdo dentro do componente Botao. Por exemplo, você pode adicionar um texto ou outros elementos dentro do Botao.

Aqui está um exemplo de como você pode corrigir o erro:

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

No arquivo index do formulário, ao usar o componente Botao, você pode passar o texto desejado como a propriedade 'texto', conforme você já está fazendo:

<Botao texto='Adicionar' />

Dessa forma, você estará fornecendo a propriedade 'texto' necessária para o componente Botao e não receberá mais o erro relacionado à falta da propriedade 'children'.

Certifique-se de que as outras partes do código estejam corretas e que as importações estejam sendo feitas adequadamente.

por Lucas Gomes Santos

| 92.4k xp | 5 posts

05/07/2023

Tela do professor O professor ensinou a fazer dessa forma, só que logo depois ele fala sobre o metodo children

Outra tela

por Lucas Gomes Santos

| 92.4k xp | 5 posts

05/07/2023

A Monitora Lorena Garcia respondeu nesse post https://cursos.alura.com.br/forum/topico-property-children-does-not-exist-on-type-readonly-248427

Resposta da mesma: O erro que você está enfrentando ("Property 'children' does not exist on type 'Readonly<{}>'") ocorre porque a propriedade "children" que você está tentando acessar em seu componente Botao não é reconhecida pelo TypeScript.

Isso ocorre porque a propriedade "children" é uma propriedade implícita do React que não é explicitamente definida em sua classe Botao. O TypeScript não pode reconhecê-la a menos que seja explicitamente definida em sua classe Botao.

Para resolver esse problema, você pode adicionar a propriedade "children" à interface genérica da sua classe Botao. Ficaria assim:

interface Props {
  children: React.ReactNode;
}

class Botao extends React.Component<Props> {
  render() {
    return (
      {this.props.children}
    )
  }
}

Desta forma, o TypeScript reconhecerá a propriedade "children" e o erro desaparecerá.

Outra alternativa é usar a interface "React.PropsWithChildren", que inclui a propriedade "children" em uma interface genérica. Ficaria assim:

class Botao extends React.Component<React.PropsWithChildren<{}>> {
  render() {
    return (
      {this.props.children}
    )
  }
}

solução!

por Daniel Alves

| 31.3k xp | 1 posts

11/07/2023

Aparentemente é uma divergência causada pela versão do React: https://cursos.alura.com.br/forum/topico-problemas-com-a-this-props-children-property-children-does-not-exist-233312