How to conditionally render the button in react-bootstrap-table ? (The button for each row)

I'm trying to conditionally render the button in the react-bootstrap-table by comparing the row.id with the item.id from my database.

I managed to add a button by using a the dataFormat prop, but I'm having trouble to display a button conditionally

  • I'm using the table to display groups that I get from my database.
  • once I fetch all the groups, I compare their ids (row.id) with the groups that I have on my database.
  • If they match I display Button1
  • If they don't match I display Button2

I tried many attempts but my solutions are not giving me the desired result

Here's my code :

  • If I already have 8 groups in the database, the buttons of the 8 groups should be red with a different text than the other buttons.
  • and if the group is not in the database, it's button 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 variation that 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

Answers:

Answer

Your logic seems correct but 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 some modifications.

Answer

Issue is you are returning one one button from cell formatter function.

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, like this:

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>
        }
    })
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.