ReactJs - Pass Parameters to Event handler

Question

I've just started looking basics of ReactJs. Following is my component to show list of buses. What I want exactly is I want to perform edit/delete operations over buses. But not able to pass busId of corresponding bus to my edit/delete methods.

Following is component code

import React, {Component} from "react";
import { withRouter } from 'react-router-dom'
import {Table,Badge, Label,FormGroup,Container, Row, Col, CardGroup, Card, CardBlock,CardHeader, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";

import {appSettings} from '../../../../Utils/Util.js';
import Pagination from "react-js-pagination";

var axios = require('axios');

class BusList extends React.Component {

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

    componentWillMount() { 
        this.loadBuses();
    }

    loadBuses() {

        var url = ‘my-api-complete-url-here’;
        axios.get(url)
            .then((result) => {

                var key = 0;
                var buses = result.data.map(function(bus,i){
                    return <tr key={key++}>
                        <td key={key++}>{bus.id}</td>
                        <td key={(key++)}>{bus.number}</td>
                        <td key={(key++)}>
                                <Button onClick={(e)=>this.editBus(e, bus.id)}>Edit</Button>
                              <Button  onClick={(e)=>this.deleteBus(e, bus.id)}>Delete</Button>
                        </td>
                    </tr>
                });
                this.setState({busList: buses});
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    render() {
        return (
            <div className="animated fadeIn">

                                <Table hover responsive striped>
                                    <thead>
                                    <tr>
                                        <th>Sr #</th>
                                        <th>Bus Number</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        {this.state.busList}
                                    </tbody>
                                </Table>
            </div>
        );
    }

    editBus(id, e) {
        console.log(‘Edit - Bus Id = '  +id);
    }

    deleteBus(id, e) {
        console.log('Delete - Bus Id = '  +id);
    }
}

export default BusList;

But when tapped on edit button, I receive this error( Screenshot)

Answer 1

you're accessing it in wrong order, you're passing (e)=>this.editBus(e, bus.id) and in function you've defined editBus(id, e)

moreover you need to bind(this) at the end of map function

var buses = result.data.map(function(bus,i){
    return <tr key={key++}>
        <td key={key++}>{bus.id}</td>
        <td key={(key++)}>{bus.number}</td>
        <td key={(key++)}>
            <Button onClick={(e)=>this.editBus(e, bus.id)}>Edit</Button>
            <Button  onClick={(e)=>this.deleteBus(e, bus.id)}>Delete</Button>
        </td>
    </tr>
});

Also, you don't need to define key variable. Instead, use second argument i of map function as it is the index of array element.

updated

you need to change your map code with

var buses = result.data.map(function(bus,i){
    return <tr key={key++}>
        <td key={key++}>{bus.id}</td>
        <td key={(key++)}>{bus.number}</td>
        <td key={(key++)}>
            <Button onClick={(e)=>this.editBus(e, bus.id)}>Edit</Button>
            <Button  onClick={(e)=>this.deleteBus(e, bus.id)}>Delete</Button>
        </td>
    </tr>
}.bind(this));

The .bind(this) in the last line does the trick.