How can I delete a button in a cell and replace it with a text/number?

Question

I'm preparing a react-table and there is a column of buttons. When clicked, there is another column that updates according to the row number that was clicked.

I want to remove the separate column to show the data and have it update the column which has the button in it. Therefore once clicked, the data obtained will replace the button in that particular row. How do I do this?

this is the table format I currently have. So when I click the button, 'API calls in last month' gets updated accordingly.

{
  Header: 'Click to get API info',
  accessor: 'click-me-button',
  Cell: ({ row }) => (
    <button onClick={(e) => this.handleButtonClick(e, row)}>Click Me</button>
  )
},{
  Header: 'API calls in last month',
  accessor: 'lastapicalls',
  Cell: row => <div style={{ textAlign: "center" }}>{row.value}</div>
}

I want to remove the column 'API calls in last month' and update 'click-me-button' column with that info obtained by clicking the button (by replacing the clicked button with the obtained data)

The code for obtaining data for now is as follows

handleButtonClick(e, rowInfo) {
  axios({   
    method: 'get',
    url: 'http://localhost:8080/info/search/lastapicalls/'+rowInfo.tenant_domain, 
    auth: {
      username: this.state.user,
      password: this.state.pass,
    }
  })
  .then(response => this.setState({ retrievedapicalls: response.data },
    () => {
      this.setState(oldState => {
        let data = oldState.data.slice();
        let copy = Object.assign({}, data[rowInfo._index]);
        copy.lastapicalls = this.state.retrievedapicalls;
        copy.selected = true;
        data[rowInfo._index] = copy;
        return {
          data
        };
      }
    );
  }))
}

The state 'data' contains the information necessary to fill the table.

What do you mean remove the column? Delete the entire column from the table or just empty the contents of the cell on that row? — Chris B., May 24 '19 at 23:51
The entire column. Now I have two columns. One with buttons for each row and an empty one to show the info gained from the buttons (once clicked). I want to remove the empty one and have the info shown on the button column itself (replacing the button with the info gained). Much thanks — Rahal Medawatte, May 29 '19 at 05:36

score 0 · Answer 1 · answered Jul 09 '19 at 12:54

In your data array, you can add a property isClicked initialized at false by default. Then, once it's clicked, in your handleButtonClick function, you can set the property isClicked to true.

To display the cell content, you can have a conditional on the isClicked property. If it's true, you show the API last call info. Otherwise, you show the button.

data array:

const data = [
  { "click-me-button": "hi", lastapicalls: "now", isClicked: false },
  { "click-me-button": "hi", lastapicalls: "now", isClicked: false },
  { "click-me-button": "hi", lastapicalls: "now", isClicked: false }
];

column definition:

render() {
  return (
    <div>
      <ReactTable
        data={this.state.data}
        columns={[
          {
            Header: "Click to get API info",
            accessor: "click-me-button",
            Cell: row => this.renderApiInfo(row)
          }
        ]}
        defaultPageSize={10}
        className="-striped -highlight"
      />
    </div>
  );
}

// Toggle content on idClicked property
renderApiInfo(row) {
  if (row.original.isClicked) {
      return (
        <div style={{ textAlign: "center" }}>{row.original.lastapicalls}</div>
      );
  } else {
    return (
      <button onClick={e => this.handleButtonClick(e, row)}>Click Me</button>
    );
  }
}

And, clicking on the button should update the data object stored in your state:

handleButtonClick(e, rowInfo) {
  // In your then() scope after sending your axios request
  const nextState = { ...this.state };
  nextState.data[rowInfo.index].isClicked = true;
  this.setState(nextState);
}

How can I delete a button in a cell and replace it with a text/number?

1 Answers1