React Js Handling event button on a column to get row using onClick

Question

Hi i am a new learner who was trying to find how to use oclick on button in react data table, below are my code for, in the last row i add a button to execute delete method.

import React, {Component} from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';
import {Card, Table, Button, ButtonGroup, Nav} from 'react-bootstrap';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faList, faEdit, faTrash} from '@fortawesome/free-solid-svg-icons';
import DataTable from 'react-data-table-component';
import Rodal from 'rodal';
import ModalFormPengarang from './ModalFormPengarang.js'

const columns = [ 
    {
        name:'Id',
        selector:'idPengarang',
        sortable: true,
        filterable: true,
    },
    {
        name:'Author',
        selector:'namaPengarang',
        sortable: true,
        filterable: true,
    },
    {
        name: 'Update',
        button: true,
        cell: () => <Button size='sm' className="btn-btn-primary"
        o>Update
        </Button>,
    },

    {
        name: 'Update',
        button: true,
        cell: () => <Button size='sm' className="btn btn-warning"
        >Delete</Button>,
    },
];

export default class PengarangList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            pengarang : []
        };
        this.componentDidMount = this.componentDidMount.bind(this);
        this.deletePengarang = this.deletePengarang.bind(this);
    }


    componentDidMount() {
        axios.get("http://localhost:3030/control/pengarang/get")
            .then(
                response => {
                this.setState({pengarang:response.data});
            });
    }

    findAllPengarang() {
        axios.get("http://localhost:3030/control/pengarang/get")
            .then( response => response.data)
            .then((data) =>  {
                this.setState({pengarang:data});
             });
    }

    deletePengarang = (idPengarang) => {
        axios.delete("http://localhost:3030/control/pengarang/delete/"+idPengarang)
            .then(response => {
                if(response.data != null) {
                    alert("Author deleted successfully.");
                    this.setState({
                        pengarang: this.state.pengarang.filter(pengarang => pengarang.idPengarang !== idPengarang)
                    })
                }
            });
    }

    render () {
        return (
            <Card className={"border border-dark bg-light"}>
                <Card.Header>
                <FontAwesomeIcon icon={faList} />
                    Author List
                </Card.Header>
                <Card.Body>
                    <DataTable
                        title="Author Table"
                        columns={columns} 
                        pagination={true}
                        data={this.state.pengarang.map((pengarang) => (
                            {idPengarang:pengarang.idPengarang,
                            namaPengarang:pengarang.namaPengarang}
                        ))}
                        />
                </Card.Body>
                <Card.Footer>
                     <Link size = "sm" to={"addPengarang"} align="right" className="nav-brand">
                        <Button size = "sm" className="btn btn-primary" align="right">
                            Add
                        </Button>
                        </Link>
                </Card.Footer>
            </Card>
        );
    }
}

My question is how to access deletePenerbit method using button in data table ? I was really confused with this things, anyone can help me ? Thanks

score 0 · Answer 1 · answered Sep 16 '20 at 17:54

0

You need to pass your deletePengarang method to your <Button/> element's onClick listener as an argument like this

<Button onClick={this.deletePengarang}>

</Button>

answered Sep 16 '20 at 17:54

Sezerc

169
9

yes i know that, but the problem the onclick method was undefined, i don't know why but maybe it's because i set the columns variable outside the class, so the deletePengarang method can;t pass to my button – aarans Sep 17 '20 at 03:43
First of all you dont need to bind your functions to `this` keyword because you are using arrow functions. And `componentDidMount` lifecyle method has access to `this` already so you dont need to bind that too. I dont know how you passed your handler to your component because it is not on the code you shared. Your `deletePengarand` function has nothing to do with your `columns` array. You are confused too much. I dont even understand what is the exact problem you are facing. Try to be a bit cleaner with your problem and read some docs. – Sezerc Sep 17 '20 at 07:28
Aah thanks for the answer, I've solved it, thanks again my brother your answer make me more understand @sezerc. – aarans Sep 17 '20 at 13:39

React Js Handling event button on a column to get row using onClick

1 Answers1