[Dúvida] Botao funcional para varias interfaces | React: integrando seu projeto React com APIs

boa tarde amigos, estou criando um projeto seguindo o curso, me deparei com uma duvida. Tenho tres tabelas, vendedores, carros e vendas. cada linha das tabelas possuem um botão excluir.

import Icarros from "../../interfaces/Icarros";

type Props = {
    excluir: (itemASerExlcuido: Icarros) => void
    item: Icarros
}

const BotaoExcluir: React.FC<Props> = ({ excluir, item }: Props)  => {

    return (
        <button
            className="bg-red-500 border-solid border-1 p-1 rounded-lg"
            onClick={() => excluir(item)}         
        >
            Deletar
        </button>
    )
}

export default BotaoExcluir;

Como faço para criar esse botão funcional paras as três paginas?

tentei add os outros tipos nas props mas não funcionou, na pagina Carros a funcao exclluir mostrou esse erro:

Type '(itemASerExlcuido: Icarros) => void' is not assignable to type '(itemASerExlcuido: Icarros | Ivendedores | Ivendas) => void'. Types of parameters 'itemASerExlcuido' and 'itemASerExlcuido' are incompatible. Type 'Icarros | Ivendedores | Ivendas' is not assignable to type 'Icarros'. Type 'Ivendedores' is missing the following properties from type 'Icarros': marca, valorts(2322) index.tsx(6, 5): The expected type comes from property 'excluir' which is declared here on type 'IntrinsicAttributes & Props'

import Icarros from "../../interfaces/Icarros";
import Ivendas from "../../interfaces/Ivendas";
import Ivendedores from "../../interfaces/Ivendedores";

type Props = {
    excluir: (itemASerExlcuido: Icarros | Ivendedores | Ivendas) => void
    item: Icarros | Ivendedores | Ivendas
}

const BotaoExcluir: React.FC<Props> = ({ excluir, item }: Props)  => {

    return (
        <button
            className="bg-red-500 border-solid border-1 p-1 rounded-lg"
            onClick={() => excluir(item)}         
        >
            Deletar
        </button>
    )
}

export default BotaoExcluir;

Salve, Thiago!

Normlamente o evento de click do botão é agnóstico ao que vai ser feito, ele não força uma interface do que vai ser realizado com a ação de click em si:

type Props = {
    onClick: () => void; //aoClicado se você preferir em português :)
    texto: string;
}

No componente você define a função excluir em si:

const excluir = (item: Item) => {
    // faz qq coisa que precisa
}

E no JSX, durante o .map, você faz:

{items.map(item => <> <Botao texto="Excluir" onClick={() => excluirItem(item)}/> </>)}

Seria um botão mais genérico do que um simplesmente pra excluir. Existem outras formas de se fazer isso mas, pessoalmente falando, eu prefiro esta mais genérica onde o botão só é responsável por emitir o evento de click em si :)

Mergulhe em programação