I need help in delete button - React

I need help in delete button - React
0

Hello,
I need help in button delete

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import api from '../../services/api'

export default class Index extends Component {

    constructor(props) {
        super(props);
        this.onDeleteId = this.onDeleteId.bind(this);
        this.state = { motoristas: [] };
    }

    async componentDidMount() {
        try {
            const response = await api.get('/motoristas');
            this.setState({ motoristas: response.data })
        }
        catch (error) {
            console.log(error)
        }
    }

    onDeleteId(e) {
        this.setState({
          ID_MOTORISTA: e.target.value
        });
      }

    delete() {  
        try {
            api.delete('/motoristas/' + this.props.id)
        }
        catch (error) {
            console.log(error)
        }

        //this.props.history.push('/PesquisarMot');
    }

    render() {
        return (
            <div>
                <h3 align="center">Motoristas</h3>
                <table className="table table-striped" style={{ marginTop: 20 }}>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Motorista</th>
                            <th>Celular</th>
                            <th>CPF</th>
                            <th>RG</th>
                            <th>Categoria</th>
                            <th>Data</th>
                            <th colSpan="2">Ações</th>
                        </tr>
                    </thead>
                    <tbody>{
                        this.state.motoristas.map(motorista => (
                            <tr key={motorista.ID_MOTORISTA}>
                                <td>
                                    {motorista.ID_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.NM_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.CEL_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.CPF_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.RG_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.CATEGORIACNH_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.DATA_NASC_MOTORISTA}
                                </td>
                                <td>
                                    <Link to={`/atualizarMot/${motorista.ID_MOTORISTA}`}><button className="btn btn-primary">Editar</button></Link>
                                </td>
                                <td>
                                    <button className="btn btn-danger" id={motorista.ID_MOTORISTA} onClick={this.delete}>Excluir</button>
                                    
                                </td>
                            </tr>))}
                    </tbody>
                </table>
            </div>
        );
    }
}import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import api from '../../services/api'

export default class Index extends Component {

    constructor(props) {
        super(props);
        this.onDeleteId = this.onDeleteId.bind(this);
        this.state = { motoristas: [] };
    }

    async componentDidMount() {
        try {
            const response = await api.get('/motoristas');
            this.setState({ motoristas: response.data })
        }
        catch (error) {
            console.log(error)
        }
    }

    onDeleteId(e) {
        this.setState({
          ID_MOTORISTA: e.target.value
        });
      }

    delete() {  
        try {
            api.delete('/motoristas/' + this.props.id)
        }
        catch (error) {
            console.log(error)
        }

        //this.props.history.push('/PesquisarMot');
    }

    render() {
        return (
            <div>
                <h3 align="center">Motoristas</h3>
                <table className="table table-striped" style={{ marginTop: 20 }}>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Motorista</th>
                            <th>Celular</th>
                            <th>CPF</th>
                            <th>RG</th>
                            <th>Categoria</th>
                            <th>Data</th>
                            <th colSpan="2">Ações</th>
                        </tr>
                    </thead>
                    <tbody>{
                        this.state.motoristas.map(motorista => (
                            <tr key={motorista.ID_MOTORISTA}>
                                <td>
                                    {motorista.ID_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.NM_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.CEL_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.CPF_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.RG_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.CATEGORIACNH_MOTORISTA}
                                </td>
                                <td>
                                    {motorista.DATA_NASC_MOTORISTA}
                                </td>
                                <td>
                                    <Link to={`/atualizarMot/${motorista.ID_MOTORISTA}`}><button className="btn btn-primary">Editar</button></Link>
                                </td>
                                <td>
                                    <button className="btn btn-danger" id={motorista.ID_MOTORISTA} onClick={this.delete}>Excluir</button>
                                    
                                </td>
                            </tr>))}
                    </tbody>
                </table>
            </div>
        );
    }
}

What are you expecting the code to do or not to do? What is happening instead?

The delete button(Excluir in my code) is not working, I tried to code in many ways and nothing works

The button page is a grid pulling various api entries, each entry line has an edit(Editar Button) and delete button, the edit(Editar) it redirects to a change page and the delete is a button within the grid itself that should delete the line to which one was pressed

Sorry my english is bad :frowning: