How to selectively enable/disable button in a table in React JS?

Question

Im using React Table(https://react-table.js.org)in A REACT JS web app and I fetch data from an API and populate the table based on the data. In one column I have a button which is used to claim the support action. If the status is success(I have the status data from the API) for a particular row I want the button to be disabled. However if the status is failed I want the button to be active(Enabled). Im using only React and not using Redux for state management. How to selectively disable the button in a row based on the status field? My code is as shown below.

    columns: [
            {
              filterable: false,
              Header: 'Action',
              accessor: 'action',
              Cell: (e) => (
                <button

                    onClick={() => {
                      axios.get(URL, {
                        headers: {
                          'content-type': 'application/json',
                          'Id': user.dealerId,
                          'Name' : user.Name,
                        },
                        responseType: 'json',
                      })
                      .then((response) => {
                        let responseData = response.data.data;
                        //console.log(responseData);
                        console.log(e.original.status);

                        function getEmailList(input, email) {
                          var output = [];
                          for (var i=0;i<input.length; ++i)
                            output.push(input[i][email]);
                          return output;
                        }
                        emailList = getEmailList(responseData, "email");
                        console.log(emailList);
                        axios({
                          method: 'post',
                          url: PostURL,
                          headers: {
                            'Content-Type' : 'application/json',
                            'Id': user.Id,
                            'Name' : user.Name,

                          },
                          data: {
                          'topic': 'details',
                          'message': {
                             'recipients': emailList,
                            'data': {
                                      'text': 'refresh',
                            },
                         'attachment': null,
                         'type': "",
                          },
                        },
                      })
                    .then((response) => {

                    });
                      });
                    }}
                    className="btn btn-primary"
                >
                Claim
                </button>
              ),
            },
          ],
        },
      ]}

Answer 1

I solved this by :

• Check the status.
• Add a simple if loop to check if the status is matching the keyword.
• If its matching then set the field to disabled else all other keywords will set the button to enabled status

Answer 2

It depends on the data used in the ReactTable.
If action parameter in the data is contain the status data, then this may works.

columns: [
        {
          filterable: false,
          Header: 'Action',
          accessor: 'action',
          Cell: (e) => {
          return (e.value == 'SUCCESS' ?
          (<button disabled>Claim</button>) :
          (
            <button
                onClick={() => {
                  ...
                }}
                className="btn btn-primary"
            >
            Claim
            </button>
          ))},
        },
      ],
    },
  ]}

Hope this help.