Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Property 'type' does not exist on type 'IntrinsicAttributes & ListaSuspensaProps'.

Olá professores!

Tenho passado por um erro em que quando importo os tipos de valor de input de CampoTexto para o Formulario eu obtenho esses erros: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Quando vejo o que é o nosso tipo dentro do index.tsx de Formulario ele está como "any"

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Creio que há diferenças entre o ts.config, porém não tenho certeza. Aqui está meu código:

Formulario

import { useState } from 'react'
import { IColaborador } from '../../compartilhado/interfaces/IColaborador'
import Botao from '../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'

interface FormularioProps {
    aoColaboradorCadastrado: (colaborador: IColaborador) => void
    times: string[]
}

const Formulario = (props: FormularioProps) => {

    const [nome, setNome] = useState('')
    const [cargo, setCargo] = useState('')
    const [imagem, setImagem] = useState('')
    const [time, setTime] = useState('')
    const [data, setData] = useState('')

    const aoSalvar = (evento: React.FormEvent<HTMLFormElement> ) => {
        evento.preventDefault()
        props.aoColaboradorCadastrado({
            nome,
            cargo,
            imagem,
            time
        })
        setNome('')
        setCargo('')
        setImagem('')
        setTime('')
    }

    return (
        <section className="formulario">
            <form onSubmit={evento => aoSalvar(evento)}>
                <h2>Preencha os dados para criar o card do colaborador</h2>
                <CampoTexto 
                    obrigatorio={true}
                    label="Nome"
                    placeholder="Digite seu nome" 
                    valor={nome}
                    aoAlterado={valor => setNome(valor)}
                />
                <CampoTexto
                    obrigatorio={true}
                    label="Cargo"
                    placeholder="Digite seu cargo" 
                    valor={cargo}
                    aoAlterado={valor => setCargo(valor)}
                />
                <CampoTexto
                    label="Imagem"
                    placeholder="Digite o endereço da imagem" 
                    valor={imagem}
                    aoAlterado={valor => setImagem(valor)}
                />
                <CampoTexto
                    label="Data de entrada no time"
                    placeholder="" 
                    valor={data}
                    aoAlterado={valor => setData(valor)}
                />
                <ListaSuspensa
                    obrigatorio={true}
                    label="Time" 
                    itens={props.times}
                    valor={time}
                    aoAlterado={valor => setTime(valor)}
                    type = {tipo}
                />
                <Botao>
                    Criar Card
                </Botao>
            </form>
        </section>
    )
}

export default Formulario

CampoTexto

import React from 'react'

import './CampoTexto.css'

interface CampoTextoProps {
    aoAlterado: (valor: string) => void
    placeholder: string
    label: string
    valor: string
    obrigatorio?: boolean
    tipo?: 'text' | 'email' | 'date' | 'number' | 'password'
}

const CampoTexto = ({ aoAlterado, label, obrigatorio, placeholder, valor, tipo = 'text' } : CampoTextoProps) => {

    const placeholderModificada = `${placeholder}...` 

    const aoDigitado = (evento: React.ChangeEvent<HTMLInputElement>) => {
        aoAlterado(evento.target.value)
    }

    return (
        <div className="campo-texto">
            <label>
                {label}
            </label>
            <input 
                value={valor} 
                onChange={aoDigitado} 
                required={obrigatorio} 
                placeholder={placeholderModificada}
                type={tipo}
            />
        </div>
    )
}

export default CampoTexto

Obrigado!

1 resposta
solução!

Oi galera, depois de 1 minuto eu consegui achar meu próprio erro, que foi declarar o tipo no componente errado. Depois dessa vou me retirar pra tomar um café. Obrigado

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software