CODEWITHSUNDEEP
javascriptreactjsreact-tablereact-table-v6
Rahal Medawatte
Rahal Medawatte

Reputation: 11

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

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.

Upvotes: 1

Views: 305

Answers (1)

Orlyyn
Orlyyn

Reputation: 2606

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);
}

Upvotes: 0

Related Questions