javascript - react-bootstrap-table でボタンを条件付きでレンダリングする方法は? (各行のボタン)

Question

react-bootstrap-tableデータベースのrow.idとitem.idを比較して、条件付きでボタンをレンダリングしようとしています。

dataFormat小道具を使用してボタンを追加することはできましたが、条件付きでボタンを表示するのに問題があります

• テーブルを使用して、データベースから取得したグループを表示しています。
• すべてのグループをフェッチしたら、それらの ID (row.id) をデータベースにあるグループと比較します。
• それらが一致する場合、私は表示しますButton1
• 一致しない場合は表示しますButton2

私は多くの試みを試みましたが、私の解決策は私に望ましい結果を与えていません

これが私のコードです:

• データベースに既に 8 つのグループがある場合、8 つのグループのボタンはred、他のボタンとは異なるテキストにする必要があります。

• グループがデータベースにない場合、そのボタンは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>
      )
    }
  }
  

私が試した別の失敗したバリエーション：

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