How to get specific row parameters and send it an API call in React Table?

Question

Im using React Table(http://react-table.js.org). I call an API and populate the table with the data from the table. In the last column I have added a button which upon clicking should:

• Get parameters of the selected row(For ex, get the name and id being displayed in the particular row)
• It will then call an API and make a POST call and the parameters received in the previous step will be sent in the body
• Once I get a successful response from the POST call, I call another API to refresh my table and reload it. I have used a sample API below to illustrate my code.

My Table implementation is as follows,

    class TableExp extends React.Component {
    constructor() {
    super();

this.state = {
  tableData: [
    {
      ID: '',
      resourceType: '',
      Name: '',
      dealerID: '',
    },
  ],
 };
}

My code which implements the column where I have the button, is as follows:

    columns: [
            {
              filterable: false,
              Header: 'Action',
              accessor: 'action',
              Cell: (e) => (
                <button
                    onClick={() => {
                      console.log('CLicked value');
                      axios.post('https://reqres.in/api/users', {
                        headers: {},
                        data: {
                          "name":"Test",
                          "ID":"TestJob"
                        },
                        responseType: 'json',
                      })
                    .then((response) => {
                      console.log(response.data);
                      axios.get('https://reqres.in/api/users', {
                       headers: {},
                       responseType: 'json',
                      })
                    .then((response) => {
                      this.setState({ tableData: response.data });
                    });
                   });
                  }}
                    className="btn btn-primary"
                >
                Claim
                </button>
              ),
            },
          ],

By the above implementation, Im able to call the API and make the POST request(Sending hardcoded body parameter values) ,but my question is how to get the parameters(From the selected row) from the React table and include it in the body of the POST call? Im using React only for state management and not using Redux.

Answer 1

Refer to here

• row - Original row from your data
• row - The post-accessed values from the original row
• index - The index of the row
• viewIndex - the index of the row relative to the current page

Following your code:

Cell: (e) => (
  axios.post('https://reqres.in/api/users', {
    headers: {},
    data: {
      ...,
      value: e.rowValue,
    },
    responseType: 'json',
  })
)

e is row which contains your data in that current (selected) row