onClick event - change data for a single row in react table

user_7591842 0
Viewed 4091

I have a column in my react table that is using a variable (named item) for displaying its data. As shown in the code below: 

{
  Header: this.generateHeaderCell(this.props.headers[3]),
  accessor: 'last_updated_status',
  Cell: (props: any) => <DateSinceFormat date={props.value} item={item}/>,
  maxWidth: 85,
  filterable: false
}

So when the value of variable item is 1 it displays some data and when it's changed it displays something else.

I am using the onClick event for changing the value of item. 

onRowClick = (state, rowInfo, column, instance) => {
    return {
        onClick: e => {
            if(item === '2') {
                item = '1';
            } else {
                item = '2';
            }
            instance.forceUpdate();
        }
    };
}

The problem I face here is, I only want to update the value for a particular row, that is clicked by the user, however, right now all the rows are getting updated.

Please help me out here and let me know how to fix this issue.

react-table reactjs javascript
1 Answers

It looks like value for item is being shared between all rows. You can try to add item property to rowInfo (I assume it's an object), and change onClick() function to 

onClick: e => {
         if(rowInfo.item === '2') 
         {
             rowInfo.item = '1';
         } 
         else 
         {
             rowInfo.item = '2';
         }
   instance.forceUpdate();
}
user_70703280
Related