React Table 7 - How to change the state of an individual button created dynamically by the React-Table API

[umarmuha]

I am using React Table 7 to create a table with the first cell of each row being a ChecOut/CheckIn Button. My goal is to create a tool where people can CheckOut and CheckIn equipment. My React Table CodeSandbox

The idea is that when a user clicks the button, it will change from "CheckOut" to "CheckIn" and vise versa. It will also change the color of the row when Checked out. I was able to accomplish this with JQuery (code is in the sandbox under the App() functional component) but want to avoid that and am sure it's easily doable in react.

My issue is changing the state of an individual button and which functional component to define it in. The <Button> elements are created dynamically by the React-Table, defined in the columns object under the App functional component.

      {
        Header: "CheckIn/Out",
        Cell: ({ row }) => (
          <Button
            key={row.id}
            id={row.id}
            onClick={e => checkClick(e)}
            value={checkButton.value}
          >
            {checkButton.value}
          </Button>
        )
      }

I tried passing a function to onChnage attribute on the <Button> element. In that function I updated the state of the <Button> to change the string value from "CheckOut" to "CheckIn" but that does not work. At first, that changed the name (state) of All the <Button> elements. Not sure if the state will live in the App() component or the TableRe() functional component. Or do I need to use state at all?

I basically built this on top of the editable table code available on the React-Table website React-Table Editable Data CodeSandbox , examples section React-Table Examples .

Any help is much appreciated!

[GuptaSiddhant]

This can be done is an easier way (without jQuery) by dynamically adding a column. An example of this is shown in RowSelect where a new column in added to show checkboxes.
I forked your code here, https://codesandbox.io/s/react-table-checkin-checkout-uks4x.

Essentially update your useTable() to

const {
    ...
  } = useTable(
    {
      columns,
      data,
      updateMyData
    },
    usePagination,
    hooks => {
      hooks.visibleColumns.push(columns => [        
        {
          id: "checkinout",
          Header: "CheckIn/Out",
          Cell: ({ row }) => <CheckButton {...row} />
        },
        ...columns
      ]);
    }
  );

and provide a custom Button component. For eg,

const CheckButton = row => {
  const [checkButton, setcheckButton] = useState({ value: "CheckOut" });
  const handleClick = () => {
    setcheckButton(prev => ({
      value: prev.value === "CheckOut" ? "CheckIn" : "CheckOut"
    }));
  };
  return (
    <Button
      key={row.id}
      id={row.id}
      onClick={handleClick}
      value={checkButton.value}
    >
      {checkButton.value}
    </Button>
  );
};

[umarmuha]

Wow! @GuptaSiddhant cant thank you enough for your help. This did the trick. I was using the basic table example and never saw the rowSelect hook. I really appreciate you taking the time to respond.

In addition if I need to make an API call (send value to database) on Button onClick, will I add that in the handleClick function or use useEffect hook inside the function? Thanks again!!

[GuptaSiddhant]

Since you are working on booleans, both approaches will work fine.

I'd prefer to add it to handleClick. You could add async/await to handleClick and wait till your API call is made before updating state. This will make sure that your API call was successful before showing changes. If you're using axios for API, then you can resolve status as result as well.

const handleClick = async () => {
   const result = await fetch('', ...); //Make your API call;
   if (result)
    setCheckButton({
      value: !check.value;
    });
  };

[umarmuha]

Awesome! I will give that a try. Thanks again for all your help.

[t0scale]

Hi Gupta,

Quick question: Could this have been done within the columns definition? My column definition is in a separate file so this is a great solution. I'm just curious about alternative approaches. Thanks.

[GuptaSiddhant]

@t0scale I believe so it can be used in normal column definition.
The idea should be maintaining a separate component which manages its own state so clicking the button doesn’t cause table to render unnecessarily.
Do try and let me know how it worked for you.