Add Edit Button in react-bootstrap-table

Question

I am using react-bootstrap-table to implement table structure in React, I tried to add edit button and onClick function for that but its not working.

My code :

render(){
    function test(){
        alert("asd");
    }

    function imgFormatter(cell,row) {
        return '<a href="#" onClick="test();"><i class="fa fa-pencil" aria-
                  hidden="true"></i></a>';
    }

    return(
        <BootstrapTable data={this.state.members} bordered={ false } pagination={ true }>
            <TableHeaderColumn isKey dataField='memberid' dataSort>ID</TableHeaderColumn>
            <TableHeaderColumn dataField='name' dataSort>Name</TableHeaderColumn>
            <TableHeaderColumn dataField='username' dataSort>Username</TableHeaderColumn>
             <TableHeaderColumn dataField='email' dataSort>Email</TableHeaderColumn>
            <TableHeaderColumn dataField='mobile'>Mobile</TableHeaderColumn>
            <TableHeaderColumn dataField='edit' dataFormat={ imgFormatter }>Edit</TableHeaderColumn>
        </BootstrapTable>
    )
}

Am I implementing correctly? why edit onclick not working ? can anyone know how to add edit button in react-bootstrap-table .

Answer 1

Am I implementing correctly?

No, Instead of returning the string from function, return the JSX .

Write the formatter function like this:

function imgFormatter(cell,row) {
    return  <a href="#" onClick={test}>
                <i class="fa fa-pencil" aria-hidden="true"></i>
            </a>;
}

why edit onclick not working ?

About Events in JSX, As per DOC :

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:

1. React events are named using camelCase, rather than lowercase.

2. With JSX you pass a function as the event handler, rather than a string .

Suggestion:

Instead of defining these functions inside render method, i will suggest you to define outside of render method and use this keyword to access.

Like this:

imgFormatter(cell,row) {
    return  <a href="#" onClick={this.test}>
                <i class="fa fa-pencil" aria-hidden="true"></i>
            </a>;
}

test(){
    console.log('clicked');
}

render(){
    return(
        <BootstrapTable data={this.state.members} bordered={ false } pagination={ true }>
            .....
            <TableHeaderColumn dataField='edit' dataFormat={ this.imgFormatter.bind(this) }>Edit</TableHeaderColumn>
        </BootstrapTable>
    )
}

Answer 2

There are couple of errors you have implemented in the wrong way:

1. All the functions should be moved out of the render() for the best of practice
2. You need to add return() the table template in your render() in order to render it in the component

3. All the class in the virtual DOM syntax should be changed to className so it should be written as:

    function imgFormatter(cell,row) { return '<a href="#" onClick={this.test}><i className="fa fa-pencil" aria- hidden="true"></i></a>'; } 

   with the test() reference from the component.