5

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.

Pranav Bhatia
  • 155
  • 4
  • 14

1 Answers1

0

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();
}
Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
Uma
  • 836
  • 5
  • 7
  • Thank you for your answer, however as in the code below I am using the item variable in this way => **Cell: (props: any) => ** How can I use rowInfo.item over here? – Pranav Bhatia Dec 21 '18 at 18:27
  • I see! Is there any way you could share the component code, so I see what are the scopes for the table elements and when the function is being called? – Uma Dec 21 '18 at 20:28