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.

Mayank Shukla · Accepted Answer · 2017-07-10 06:41:56Z

3

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:

React events are named using camelCase, rather than lowercase.
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>
    )
}

edited Jul 10, 2017 at 6:41

answered Jul 10, 2017 at 6:20

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ayyanar pms Over a year ago

yes i tried this too but got this error "Uncaught ReferenceError: test is not defined at HTMLAnchorElement.onclick"

Mayank Shukla Over a year ago

@ayyanarpms it should work, check the update part and try that.

ayyanar pms Over a year ago

i got this error on your updated code "Uncaught TypeError: Cannot read property 'bind' of undefined"

Mayank Shukla Over a year ago

did you define those functions outside of render method ?

MattYao · Accepted Answer · 2017-07-10 06:27:08Z

0

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

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

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.

answered Jul 10, 2017 at 6:27

MattYao

2,55518 silver badges24 bronze badges

Collectives™ on Stack Overflow

Add Edit Button in react-bootstrap-table

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related