Passagem de uma Props sempre retorna Undefined | React: escrevendo com Typescript

Olá, pela questão de manter as boas práticas mencionadas nos vídeos eu adicionei uma props de type para o componente Botão: ` import botaoStyle from "./botao.module.scss"

type botaoProps = { tarefa : string , type : 'submit' | 'reset' | 'button' | undefined; }

export default function Botao(tarefa:botaoProps, type:botaoProps): JSX.Element { const tipo = type.type; console.log(tipo,tarefa.tarefa) return ( ); }`

Com a passagem dos seguintes atributos nas chamadas dos componentes://Chamada no formulário <Botao type = "submit" tarefa = "Adicionar" />

//Chamada no Cronometro
<Botao
                type="button"
                tarefa="Começar"
/>

Apesar disso, no console.log ele demonstra que apesar disso, o retorno é sempre Undefined, alguém poderia me ajudar? Insira aqui a descrição dessa imagem para ajudar na acessibilidade

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.