Trying to get the row information on clicking a row on table in reactJS

Question

I am building a simple app in ReactJS that works with a JSON array by calling a certain API. I am then populating the results of the array in a table. What I now want is to click on any row in the table and get those values to pass into some other component. I am wondering how to get the row information using onClick.

Here is my code.

class ParentComponent extends Component {

constructor(props){
  super(props);
  this.state = {data: []};
}


componentDidMount() {
   fetch('http://hostname:xxxx/yyyy/zzzz')
  .then(function(response) {
   return response.json();
  })
  .then(items=>this.setState({data: items}));
 } 

fetchAccountDetails () {

}

render(){
var newdata = this.state.data;

        return (
            <table className="m-table">
                <thead>
                        <tr>
                            <th>AccountName</th>
                            <th>ContractValue</th>
                        </tr>
                    </thead>
                <tbody>
                    {
                      newdata.map(function(account, index){
                        return (
                          <tr key={index} data-item={account}  onClick={this.fetchAccountDetails()}>
                            <td data-title="Account">{account.accountname}</td>
                            <td data-title="Value">{account.negotiatedcontractvalue}</td>
                          </tr>
                              )
                            }
                          )
                    }
                </tbody>
              </table>
            );
        }
    }

export default ParentComponent;

Answer 1

Pass the index of the state element and retrieve from the state array. Also it is not required to copy state to another variable before mapping, you can do it with state itself

 render(){

    return (
        <table className="m-table">
            <thead>
                    <tr>
                        <th>AccountName</th>
                        <th>ContractValue</th>
                    </tr>
                </thead>
            <tbody>
                {
                  this.state.data.map((account, index) => {
                    return (
                      <tr key={index} data-item={account}  onClick={() => this.fetchAccountDetails(index)}>
                        <td data-title="Account">{account.accountname}</td>
                        <td data-title="Value">{account.negotiatedcontractvalue}</td>
                      </tr>
                          )
                        }
                      )
                }
            </tbody>
          </table>
        );
    }
}

fetchAccountDetails(index) {
    var values = this.state.data[index];
    console.log(values);
}

Answer 2

fetch the value using

fetchAccountDetails (event) {

Account:event.target.value
this.getData(Account);
}

getData: function(var account)
this.setState({
        state: account
    });

Now you have your data set as state and you can use it anywhere you want yo