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>

46 thoughts on “Button inside a table does not work clicking at all”

  1. 38175 833370Typically I dont learn post on blogs, even so I wish to say that this write-up extremely pressured me to try and do it! Your writing taste has been surprised me. Thank you, quite fantastic post. 789527


Leave a Comment