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>

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

  1. In your example, you render a list of elements produced by a map function, but you forgot to assign keys to the elements (tr’s in your case). Keys help React identify which items have changed, are added, or are removed. Without keys, you can get a lot of hard to catch bugs because React does not understand which row to update. The best choice for a key would be an ID or other unique string to identify each row in this table.


Leave a Comment