Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

problema no state: ITarefa

Segui todos os passos e o vsCode acusou o seguinte erro no Formulário => Type '{ tarefa: string; tempo: string; }' is missing the following properties from type 'ITarefa': selecionado, completado, id

state: ITarefa = {
        tarefa: "",
        tempo: "00:00"
        }

Adicionei as propriedades faltando e gostaria de entender o porque esse mesmo erro não aconteceu com o do professor e o que pode estar errado. Também se minha resolução está certa ou se no id eu deveria colocar id: "" Segue abaixo como ficou o código

import React, {useState} from "react";
import { ITarefa } from "../../Types/tarefa";
import Botao from "../Botao";
import style from './Formulario.module.scss';
import { v4 as uuidv4 } from "uuid";

class Formulario extends React.Component <{
    setTarefas: React.Dispatch<React.SetStateAction<ITarefa[]>>
}> {
    state: ITarefa = {
        tarefa: "",
        tempo: "00:00",
        selecionado: false,
        completado: false,
        id: uuidv4()
    }

    addTarefa(evento: React.FormEvent<HTMLFormElement>){
        evento.preventDefault();
        this.props.setTarefas(tarefasAntigas => 
            [
                ...tarefasAntigas, 
                {
                    ...this.state,
                    selecionado: false,
                    completado: false,
                    id: uuidv4()
                }
            ]
        );
        this.setState({
            tarefa: "",
            tempo: "00:00"
        })
    }

    render(){
        return (
            <form className={style.novaTarefa} onSubmit={this.addTarefa.bind(this)}>
                <div className={style.inputContainer}>
                    <label htmlFor="tarefa">
                         Adicione um novo estudo
                    </label>
                    <input
                     type="text"
                     name="tarefa"
                     value={this.state.tarefa}
                     onChange={evento => this.setState({...this.state, tarefa: evento.target.value})}
                     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"
                        value={this.state.tempo}
                        onChange={evento => this.setState({ ...this.state, tempo: evento.target.value })}
                        id="tempo"
                        min="00:00:00"
                        max="01:30:00"
                    />
                </div>
                <Botao type="submit">
                    Adicionar
                </Botao>

            </form>
        )
    }
}

export default Formulario;
2 respostas

Olá Michelle, tudo bem?

Consegue confirmar se a pasta types está com letra maiúscula ou minúscula?

solução!

Olá!

Não tenho certeza se entendi direito, mas pude ver que no seu código você especificou que o state é um ITarefa, enquanto que nas aulas o professor não chega a typar esse state em específico. Tenta deixar apenas:

class Formulario extends React.Component<{
  setTarefas: React.Dispatch<React.SetStateAction<ITarefa[]>>
}> {
  state = {
    tarefa: "",
    tempo: "00:00"
  }

Nesse caso em específico não é necessário typar, pois quando você diz que tarefa = "", "" já é uma string!

Importante lembrar também que em Formulario, você está construindo um objeto ( do tipo ITarefa), que vai ser inserido em um array de objeto ( ITarefa[]) quando você der submit no form. Portanto, ele deve receber tarefa, tempo, selecionado, completado e id.

No entanto, o STATE da classe formulario é responsável apenas por dar a TAREFA e o TEMPO para esse objeto -, pois são os únicos recebidos por INPUT .

O selecionado e completado vem como false, e o id do uuid, e são adicionados ao Objeto ao clicar em submit. Ou seja, o submit ao mesmo tempo que manda o Objeto do Formulario para o State do Tarefas (que ficam em App.tsx) , ele já adiciona o selecionado, completado e o ID.

Isso acontece bem aqui:

 this.props.setTarefas(tarefasAntigas => 
            [
                ...tarefasAntigas, 
                {
                    ...this.state,
                    selecionado: false,
                    completado: false,
                    id: uuidv4()
                }
            ]
        );

Quando você typa o STATE como ITarefas, você diz que esse state tem que receber selecionado, completado e id pelo INPUT, o que nunca vai acontecer, pois como disse, eles são adicionados ao Objeto quando você clicka em Submit!

Mais adiante nas aulas, ele reformula esse class component para um function component, que talvez fiquei mais claro pra você (pra mim ficou bem mais).