title: How to fetch the current value of table cell in react js
body: <p>I am using Html table to display the data my aim is to fetch the cell value with I click on the table cell. and set the state based on the value returned from the table cell. I am using jquery to fetch the value from this table it is working but I am unable to update the state.
  I am using handle click function to update the state when a user clicks on the table cell but I have no idea how to fetch the table cell value . </p>
  
  <p>below is the code used to display the data.</p>
  
  <pre><code>import React, { Component } from "react";
  import $ from "jquery";
  import "./../css/index.css";
  import { BrowserRouter as Router, Switch, Route, Link,Redirect } from "react-router-dom";
  
  class Table extends Component {
    constructor(props) {
      super(props);
      this.state = { 
        accounts : [],
        account:'',
        region:'',
     }
     this.handleClick = this.handleClick.bind(this);
    }
  
    componentDidMount = async () =&gt; {
      let _this = this;
      let account = "";
      let region = "";
      $("table").on("click", "td", function(e) {
        region = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
        account = this.parentNode.cells[0];
        account = $(account).text()
        region = $(region).text()
        console.log(region);
        console.log(account);
      });
      const response = await fetch(
        "",
        {
          headers: {
            "x-api-key": ""
          }
        }
      );
  
      const data = await response.json();
      this.setState({ accounts:data});
      $(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
  
    };
    handleClick(){
      let account = 'zahid';
      let region = 'hussain'
      this.setState(prevState =&gt; {
        prevState.account = '';
        prevState.region = '';
        return {
          count: prevState.count * 2,
          account: prevState.account + account,
          region: prevState.region + region
        }
      })
    }
    renderTableData() {
      return this.state.accounts.map((account, index) =&gt; {
        const {
          environment,
          account_number,
          bu,
          account_alias,
          resource_name
        } = account; //destructuring
        const regions = account.regions;
        return (
          &lt;tr key={index}&gt;
            &lt;td className="fixed-side"&gt;{account_number}&lt;/td&gt;
            &lt;td className="fixed-side"&gt;{account_alias}&lt;/td&gt;
            &lt;td className="fixed-side"&gt;{environment}&lt;/td&gt;
            &lt;td className="fixed-side"&gt;{bu}&lt;/td&gt;
            &lt;td&gt;
              &lt;Link to={{
                pathname:"/securityGroups",
                state: { account:'057346956084',region:'us-east-1'}}}&gt;
                {regions["us-east-1"]}
              &lt;/Link&gt;
              &lt;/td&gt;
            &lt;td&gt;{regions["us-east-2"]}&lt;/td&gt;
            &lt;td&gt;{regions["us-west-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["us-west-2"]}&lt;/td&gt;
            &lt;td&gt;{regions["us-gov-west-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["us-gov-east-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["sa-east-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["me-south-1"]}&lt;/td&gt;
            &lt;td onClick={this.handleClick}&gt;{regions["eu-north-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["eu-west-3"]}&lt;/td&gt;
            &lt;td&gt;{regions["eu-west-2"]}&lt;/td&gt;
            &lt;td&gt;{regions["eu-west-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["eu-central-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["cn-northwest-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["cn-north-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["ca-central-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["ap-northeast-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["ap-southeast-2"]}&lt;/td&gt;
            &lt;td&gt;{regions["ap-southeast-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["ap-northeast-2"]}&lt;/td&gt;
            &lt;td&gt;{regions["ap-northeast-3"]}&lt;/td&gt;
            &lt;td&gt;{regions["ap-south-1"]}&lt;/td&gt;
            &lt;td&gt;{regions["ap-east-1"]}&lt;/td&gt;
          &lt;/tr&gt;
        );
      });
    }
    render() {
      console.log(this.state.count);
      console.log(this.state.account);
      return (
        &lt;div className="wrapper"&gt;
          &lt;div id="table-scroll" className="table-scroll"&gt;
            &lt;div className="table-fixed-right table-wrap"&gt;
              &lt;table className="main-table"&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th className="fixed-side" scope="col"&gt;Account Number&lt;/th&gt;
                    &lt;th className="fixed-side" scope="col"&gt;Account Alias&lt;/th&gt;
                    &lt;th className="fixed-side" scope="col"&gt;Environment&lt;/th&gt;
                    &lt;th  className="fixed-side" scope="col"&gt;BU&lt;/th&gt;
                    &lt;th scope="col"&gt;us-gov-west-1&lt;/th&gt;
                    &lt;th scope="col"&gt;us-gov-east-1&lt;/th&gt;
                    &lt;th scope="col"&gt;sa-east-1&lt;/th&gt;
                    &lt;th scope="col"&gt;me-south-1&lt;/th&gt;
                    &lt;th scope="col"&gt;eu-north-1 &lt;/th&gt;
                    &lt;th scope="col"&gt;eu-west-3&lt;/th&gt;
                    &lt;th scope="col"&gt;eu-west-2&lt;/th&gt;
                    &lt;th scope="col"&gt;eu-west-1&lt;/th&gt;
                    &lt;th scope="col"&gt; eu-central-1&lt;/th&gt;
                    &lt;th scope="col"&gt;cn-northwest-1&lt;/th&gt;
                    &lt;th scope="col"&gt; cn-north-1&lt;/th&gt;
                    &lt;th scope="col"&gt;ca-central-1&lt;/th&gt;
                    &lt;th scope="col"&gt;ap-northeast-1&lt;/th&gt;
                    &lt;th scope="col"&gt; ap-southeast-2&lt;/th&gt;
                    &lt;th scope="col"&gt;ap-southeast-1&lt;/th&gt;
                    &lt;th scope="col"&gt;ap-northeast-2&lt;/th&gt;
                    &lt;th scope="col"&gt;ap-northeast-3&lt;/th&gt;
                    &lt;th scope="col"&gt;ap-south-1&lt;/th&gt;
                    &lt;th scope="col"&gt;ap-east-1&lt;/th&gt;
                    &lt;th scope="col"&gt;us-west-2&lt;/th&gt;
                    &lt;th scope="col"&gt;us-west-1&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
            &lt;tbody&gt;
              {this.renderTableData()}
              {/* &lt;button onClick={this.handleClick}&gt;{this.state.account}&lt;/button&gt; */}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      );
    }
  }
  export default Table;
  </code></pre>
  
  <p>The below image is my output [![enter image description here][1]][1]</p>
  
  <p>could anyone please tell me how I can achieve this.</p>
  
  <p>Please see the below image I have to get the values of the red box[![enter image description here][2]][2] have specified </p>