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

i'm trying conditionally render button in react-bootstrap-table comparing row.id item.id database.

i managed add button using dataformat prop, i'm having trouble display button conditionally

• i'm using table display groups database.
• once fetch groups, compare ids (row.id) groups have on database.
• if match display button1
• if don't match display button2

i tried many attempts solutions not giving me desired result

here's code :

• if have 8 groups in database, buttons of 8 groups should red different text other buttons.

• and if group not in database, it's button should blue

  class app extends component {  constructor() {   super()   this.state = {      json: [], // json(coming 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 button if group not in database      thebutton = <button style={{ backgroundcolor: "blue"}}                      type="button"                      onclick={() => this.onclickgroupselected(cell, row, rowindex)}>                    process group                  </button>    } else {      // display button if group in database      thebutton = <button style={{ backgroundcolor: "red" }}                      type="button"                      onclick={() => this.onclickgrouptoupdate(cell, row, rowindex)}>                    update 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 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 group       </button>     )    } else {        ....        ....    }   })  } 

your logic seems correct implementation 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 group found in database       groupexistsindatabase = true;       break;     }   }    if(groupexistsindatabase === true) {     thebutton = <button style={{ backgroundcolor: "red" }} type="button" onclick={() => this.onclickgrouptoupdate(cell, row, rowindex)}>                   update group                 </button>   } else {     thebutton = <button style={{ backgroundcolor: "blue" }} type="button" onclick={() => this.onclickgroupselected(cell, row, rowindex)}>                   process group                 </button>   }   return thebutton; } 

this solution should work. let me know if there modifications.