Button inside a table does not work clicking at all

I have a button that when clicked changes its status within a table, when I load the page and click on any one, it only activates the first one from above and the others do not, and also it does not return to the previous status, I would like to know the that I’m doing wrong.

enter image description here

In the image above, when I click on any one, it activates only the first one and does not deactivate it back,

And the 3rd has already been activated and I can’t move it, I think there’s something wrong with the map or something…

{this.state.dataSource.map(data => {
                function  ChangeIcon(e) {
                  if(data.statusPedido === 'Em aberto' ){
                    var btn = document.getElementById('btn-times');
                    var btn2 =  document.getElementById('btn-check');
                }  }

                return (
                  <tr >
                    <td>{data.statusPedido === 'Em aberto' ? 
                      <div  >
                      <button className="btn" onClick={ChangeIcon} style={{backgroundColor:'transparent'}} id="btn-times"><FontAwesome name="times" /></button> 
                      <button className="btn" id="btn-check" style={{display:"none", backgroundColor:"transparent"}}><FontAwesome name="check"/></button>
                      </div> :  <button  className="btn" style={{backgroundColor:'transparent'}} id="btn-check"><FontAwesome name="check"/> </button> }</td>

Leave a Comment