Geek Answers Handbook

How to conditionally display a button in a bootstrap reaction table? (Button for each line)

I am trying to conditionally display a button in react-bootstrap-table by comparing row.id with item.id from my database.

I managed to add a button using dataFormat prop, but I had problems displaying the button conditionally

  • I use a table to display the groups that I get from my database.
  • As soon as I get all the groups, I compare their identifiers (row.id) with the groups that I have in my database.
  • If they match, I show Button1
  • If they do not match, I show Button2

I tried many attempts, but my solutions do not give me the desired result

Here is my code:

  • If I already have 8 groups in the database, the buttons from 8 groups should be red with different text than the other buttons.

  • and if the group is not in the database, it should be blue

     class App extends Component { constructor() { super() this.state = { json: [], // json(coming from the Meetup-api) jsonFromDatabase: [], } this.cellButton = this.cellButton.bind(this); } cellButton(cell, row, enumObject, rowIndex) { let theButton for(var group in this.state.jsonFromDatabase){ if (this.state.jsonFromDatabase[group].id !== row.id){ // Display this button if the group is not in the database theButton = <button style={{ backgroundColor: "blue"}} type="button" onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}> Process the group </button> } else { // Display this button if the group is already in the database theButton = <button style={{ backgroundColor: "red" }} type="button" onClick={() => this.onClickGroupToUpdate(cell, row, rowIndex)}> Update the group </button> } } return theButton } render() { return ( <BootstrapTable data={this.state.json} options={ this.options } > <TableHeaderColumn isKey dataField='id' width='100'>ID</TableHeaderColumn> <TableHeaderColumn dataField='name' width='300'>Group Name</TableHeaderColumn> <TableHeaderColumn dataField='button' width='100' dataFormat={this.cellButton}>Generate Group Page</TableHeaderColumn> </BootstrapTable> ) } }

Another unsuccessful option I tried:

  cellButton(cell, row, enumObject, rowIndex) { let theButton Object.keys(this.state.jsonFromDatabase).map((key) => { if (this.state.jsonFromDatabase[key].id !== row.id){ return ( <button style={{ backgroundColor: "blue"}} type="button" onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}> Process the group </button> ) } else { .... .... } }) }

enter image description here

+1
source share
2 answers

Your logic seems correct, but the implementation is a bit wrong.

 cellButton(cell, row, enumObject, rowIndex) { let theButton; let groupExistsInDatabase = false; for(var group in this.state.jsonFromDatabase){ if (this.state.jsonFromDatabase[group].id === row.id){ // make groupExistsInDatabase true if the group is found in the database groupExistsInDatabase = true; break; } } if(groupExistsInDatabase === true) { theButton = <button style={{ backgroundColor: "red" }} type="button" onClick={() => this.onClickGroupToUpdate(cell, row, rowIndex)}> Update the group </button> } else { theButton = <button style={{ backgroundColor: "blue" }} type="button" onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}> Process the group </button> } return theButton; }

This solution should work. Let me know if there are any changes.

+1
source

The problem is that you are returning one button from function cell formatting.

Use this:

 cellButton(cell, row, enumObject, rowIndex) { let uiItems = []; for(var group in this.state.jsonFromDatabase){ if (this.state.jsonFromDatabase[group].id !== row.id){ uiItems.push(<button style={{ backgroundColor: "blue"}} type="button" onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}> Process the group </button>) }else{ uiItems.push(<button style={{ backgroundColor: "red" }} type="button" onClick={() => this.onClickGroupToUpdate(cell, row, rowIndex)}> Update the group </button>) } } return uiItems; }

or use map , for example:

 cellButton(cell, row, enumObject, rowIndex) { return this.state.jsonFromDatabase.map((group, i) => { if (group.id !== row.id){ return <button style={{ backgroundColor: "blue"}} type="button" onClick={() => this.onClickGroupSelected(cell, row, rowIndex)}> Process the group </button> }else{ return <button style={{ backgroundColor: "red" }} type="button" onClick={() => this.onClickGroupToUpdate(cell, row, rowIndex)}> Update the group </button> } }) }
0
source

More articles:


All Articles