Oi Gustavo, tudo bem?
Desculpe a demora em retornar.
Obrigada por compartilhar sua dúvida. Vamos analisar o código que você compartilhou para entender melhor o problema.
Primeiramente, percebi que na definição do componente Botão, você está declarando dois parâmetros, um para a prop tarefa e outro para a prop type. No entanto, quando você chama o componente nas suas duas instâncias, você passa as props diretamente como atributos, sem nomeá-las como parâmetros.
Isso significa que, na verdade, o primeiro argumento que seu componente recebe é um objeto que contém as duas props (type e tarefa), mas você está tentando acessá-las como parâmetros individuais. Por isso, a variável "tipo" está retornando Undefined, pois não há uma propriedade "type" diretamente em "type".
Para corrigir isso, você precisa alterar a assinatura do seu componente Botão para receber apenas um argumento, que será um objeto contendo as props que você deseja passar. Ficaria assim:
type botaoProps = {
tarefa: string;
type: "submit" | "reset" | "button" | undefined;
};
export default function Botao(props: botaoProps): JSX.Element {
const { tarefa, type } = props;
console.log(type, tarefa);
return <button type={type}>{tarefa}</button>;
}
Nesse novo código, estamos definindo apenas um parâmetro "props" com o tipo "botaoProps", que contém as duas props que você deseja passar. Dentro da função, usamos a sintaxe de destructuring para extrair as duas props e armazená-las em variáveis separadas.
Em seguida, usamos essas variáveis para renderizar o botão, usando a prop "type" como valor para o atributo "type" do botão e a prop "tarefa" como conteúdo do botão.
Com essa mudança, você poderá passar as props diretamente como atributos nas chamadas do componente Botão, sem a necessidade de nomeá-las como parâmetros separados. Por exemplo:
<Botao type="submit" tarefa="Adicionar" />
<Botao type="button" tarefa="Começar" />
Espero que essa explicação tenha sido clara e tenha ajudado a resolver seu problema.
Um abraço e bons estudos.
