title: onClick event - change data for a single row in react table
body: <p>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: </p>
  
  <pre><code>{
    Header: this.generateHeaderCell(this.props.headers[3]),
    accessor: 'last_updated_status',
    Cell: (props: any) =&gt; &lt;DateSinceFormat date={props.value} item={item}/&gt;,
    maxWidth: 85,
    filterable: false
  }
  </code></pre>
  
  <p>So when the value of variable <strong>item</strong> is 1 it displays some data and when it's changed it displays something else.</p>
  
  <p>I am using the onClick event for changing the value of <strong>item</strong>. </p>
  
  <pre><code>onRowClick = (state, rowInfo, column, instance) =&gt; {
      return {
          onClick: e =&gt; {
              if(item === '2') {
                  item = '1';
              } else {
                  item = '2';
              }
              instance.forceUpdate();
          }
      };
  }
  </code></pre>
  
  <p><strong>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.</strong></p>
  
  <p>Please help me out here and let me know how to fix this issue.</p>