Get my arrow function output and display it in a table format in render component in React

Question

Usecase

I am trying to get the data from my arrow function and show that in a table format whenever a button is clicked.

Here is my react component

import React, { Component } from "react";

export default class DisplayStats extends Component {

 handleClick = () => {
var params = {
    EndTime: 1536172199,
    MetricDataQueries: [ 
        {
            Id: 'm17',
            MetricStat: {
              Metric: { 
                Dimensions: [
                  {
                    Name: 'BucketName', 
                    Value: BName
                  },
                ],
                MetricName: 'BucketSizeBytes',
                Namespace: 'AWS/S3'
              },
              Period: 86400, 
              Stat: 'Sum',
              Unit: 'Bytes'
            },
            ReturnData: true
          },
    {
            Id: 'm18',
            MetricStat: {
              Metric: { 
                Dimensions: [
                  {
                    Name: 'BucketName', 
                    Value: BName
                  },
                ],
                MetricName: 'BucketSizeBytes',
                Namespace: 'AWS/S3'
              },
              Period: 86400, 
              Stat: 'Sum',
              Unit: 'Bytes'
            },
            ReturnData: true
          },
        ],
      };
      cloudwatch.getMetricData(params, function(err, data) {
        if (err) {
            console.log(err, err.stack);
        }
        else     
        {
                const a = JSON.stringify(data);
        }         
      });
      }
    render() {
        return (
          <div className="container">
              <h1>This is the stats.</h1>
            <button onClick={this.handleClick}>Click Me</button>
            </div>
        )
      }
    }

So, when i click on the button it will trigger the arrow function and give the response . And the response in the console looks like this

   {"ResponseMetadata":{"RequestId":"12345"},"MetricDataResults":[{"Id":"m17","Label":"StandardStorage BucketSizeBytes","Timestamps":["2018-09-04T18:30:00.000Z"],"Values":[38497162],"StatusCode":"Complete","Messages":[]},{"Id":"m18","Label":"AllStorageTypes NumberOfObjects","Timestamps":["2018-09-04T18:30:00.000Z"],"Values":[10],"StatusCode":"Complete","Messages":[]}]}

For which i had already return map function to retrieve the elements from the above json. And the map function is like this

var names = obj.MetricDataResults.map(function (MetricDataResults) {
  return MetricDataResults.Id + ' ' + MetricDataResults.Label + ' ' + MetricDataResults.Timestamps + ' ' + MetricDataResults.Values + ' ' + MetricDataResults.StatusCode + ' ' + MetricDataResults.Messages;
});

Assuming everything is stored in variable obj.

Now i got struck at two things :

1. How to get variable from out of the function and use it in render() method.
2. Where i need to apply my map function show that i can retrieve the elements from the json and put it in a table .

Thanks Any help is appreicated.

Answer 1

You should keep your data in your state then render it into the DOM.

const data = {
  ResponseMetadata: { RequestId: "12345" },
  MetricDataResults: [
    {
      Id: "m17",
      Label: "StandardStorage BucketSizeBytes",
      Timestamps: ["2018-09-04T18:30:00.000Z"],
      Values: [38497162],
      StatusCode: "Complete",
      Messages: []
    },
    {
      Id: "m18",
      Label: "AllStorageTypes NumberOfObjects",
      Timestamps: ["2018-09-04T18:30:00.000Z"],
      Values: [10],
      StatusCode: "Complete",
      Messages: []
    }
  ]
};

const fakeRequest = () =>
  new Promise(resolve => setTimeout(() => resolve(data)));

class App extends React.Component {
  state = {
    data: {}
  };

  handleClick = () => fakeRequest().then(data=> this.setState({ data }));

  renderResults = () =>
    this.state.data.MetricDataResults.map(MetricDataResults => (
      <div key={MetricDataResults.Id}>
        <p>ID: {MetricDataResults.Id}</p>
        <p>Label: {MetricDataResults.Label}</p>
        <p>Timestamp: {MetricDataResults.Timestamps}</p>
        <p>Values: {MetricDataResults.Values}</p>
        <p>StatusCode: {MetricDataResults.StatusCode}</p>
        <p>Messages: {MetricDataResults.Messages}</p>
      </div>
    ));

  render() {
    return (
      <div>
        {this.state.data.MetricDataResults &&
          this.renderResults()}
        <button onClick={this.handleClick}>Get results</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

For your situation setting your state would be something like:

cloudwatch.getMetricData(params, (err, data) => {
  if (err) {
    // if you want to keep error in the state
    this.setState({ error: error.stack });
  } else {
    // data should be in your state as data: {}
    this.setState({ data });
  }
});

Answer 2

  render() {
    return obj.MetricDataResults.map(item => (
        <div>
          {`${item.Id} ${item.Label} ${item.Timestamps} ${item.Values} ${item.StatusCode} ${item.Messages}`}
        </div>
      );
    });
  }

Answer 3

should be something like this:

  render() {
    return obj.MetricDataResults.map((MetricDataResults) => {
      return (
        <div>
          {MetricDataResults.Id + ' ' + MetricDataResults.Label + ' ' + MetricDataResults.Timestamps + ' ' + MetricDataResults.Values + ' ' + MetricDataResults.StatusCode + ' ' + MetricDataResults.Messages}
        </div>
      );
    });
  }