Estou seguindo as instruções do professor no curso de react na aula sobre props, mas o children não reconhece, apenas funciona o método ou eu uso a "variável"
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!
Estou seguindo as instruções do professor no curso de react na aula sobre props, mas o children não reconhece, apenas funciona o método ou eu uso a "variável"
Estou com o mesmo problema. Mesmo matando e reiniciando o server com o npm start ele não reconhece "children" como propriedade. Inclusive o "children" nem aparece como sugestão no autocomplete do VSCode como mostrado na aula.
Compiled with problems:X
ERROR in src/components/button/index.tsx:8:29
TS2339: Property 'children' does not exist on type 'Readonly<{}>'.
6 | return(
7 | <button className={style.button}>
> 8 | {this.props.children}
| ^^^^^^^^
9 | </button>
10 | )
11 | }
Botão:
import React from 'react';
import style from './style.module.scss';
class Button extends React.Component<{}> {
render() {
return(
<button className={style.button}>
{this.props.children}
</button>
)
}
}
export default Button;Formulário:
import React from 'react';
import Button from '../button';
import style from './style.module.scss';
class Form extends React.Component {
render() {
return(
<form action="" className={style.newTask}>
<div className={style.inputContainer}>
<label htmlFor="task">
Adicione um novo estudo
</label>
<input
type="text"
name="task"
id="task"
placeholder="O que você quer estudar?"
required
/>
</div>
<div className={style.inputContainer}>
<label htmlFor="time">
Tempo
</label>
<input
type="time"
step={1}
name="time"
id="time"
min="00:00:00"
max="01:30:00"
required
/>
</div>
<Button>Adicionar</Button>
</form>
)
}
}
export default Form;Carlos,
Encontrei no fórum outros posts com o mesmo problema, e ao que parece é devido a versão do React ser diferente da versão do instrutor. Aqui estou com a versão 18, na qual houveram alterações dessa prop children e não funciona mais da forma como o instrutor mostrou na aula.
Segue tópico: https://cursos.alura.com.br/forum/topico-problemas-com-a-this-props-children-property-children-does-not-exist-233312
Aqui resolvi assim:
`class Button extends React.Component <{ children:string;}>{ render() {
return (
<button style={{
backgroundColor:'blue'
}}>
{ this.props.children }
</button>`
Também estou com o mesmo problema, poderia usar <{ texto: string }> mas não sei se isso tem impacto a longo prazo e se lá na frente do código ele vai mexer nisso de novo