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>
              ),
            },
          ],
        },
      ]}

Your code is tough to read. I strongly to recommend you to refactor. Please have a look at what is separation of concern here en.wikipedia.org/wiki/Separation_of_concerns — Matthew Barbara
– Matthew Barbara, Commented Sep 18, 2017 at 7:54

Viki Theolorado · Accepted Answer · 2017-09-18 08:24:18Z

1

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.

answered Sep 18, 2017 at 8:24

Viki Theolorado

5865 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SeaWarrior404 · Accepted Answer · 2017-09-21 02:37:16Z

0

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

answered Sep 21, 2017 at 2:37

SeaWarrior404

4,18816 gold badges47 silver badges66 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related