title: How to display JSON data inside render as table in React
body: <p>I am using an API which returns JSON of various different key-value pairs. I am trying to display them inside of <code>render()</code> as a table of 2 columns, key and value, with object keys and values in them, respectively. </p>
  
  <ol>
  <li>The API in <code>fetchBasicDetails()</code> is POST which takes default this.state values as input and returns the JSON output.</li>
  <li>The JSON Output object is then stored to <strong>birth_details</strong> property of this.state using <code>setState</code> method.</li>
  <li>Then, I tried to show the object data in <code>&lt;table&gt;</code> tags using <code>forEach</code> and Object.keys, which shows nothing at all. </li>
  </ol>
  
  <p>Any help is appreciated. Thank you.</p>
  
  <pre><code>export default class HoroscopeReport extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        day: 11,
        month: 2,
        year: 2019,
        hours: 12,
        minutes: 59,
        tzone: 5.5,
        lat: 19.22,
        lon: 25.2,
        birth_details:{}
      };
    }
  
    handleSubmit = event =&gt; {
      event.preventDefault();
      //console.log("Received user submitted data"+JSON.stringify(this.state))
      this.fetchBasicDetails();
    };
  
    fetchBasicDetails() {
          let myHeaders = new Headers();
          myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
          myHeaders.append("Authorization", "Basic XXXXXXXXXXXXXXX");
  
          let urlencoded = new URLSearchParams();
          urlencoded.append("day", this.state.day);
          urlencoded.append("month", this.state.month);
          urlencoded.append("year", this.state.year);
          urlencoded.append("hour", this.state.hours);
          urlencoded.append("min", this.state.minutes);
          urlencoded.append("lat", this.state.lat);
          urlencoded.append("lon", this.state.lon);
          urlencoded.append("tzone", this.state.tzone);
  
          let requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: urlencoded,
            redirect: 'follow'
          };
  
          fetch("https://json.astrologyapi.com/v1/birth_details", requestOptions)
            .then(response =&gt; response.text())
            .then(result =&gt; {
              this.setState({ birth_details: result });
            })
            .catch(error =&gt; console.log('error', error));
         }
  
    render() {
  
      return (
        &lt;div&gt;
  {/* FORM SUBMITTION CODE HERE */}
                &lt;h2&gt;Output:-&lt;/h2&gt;
                &lt;table border={2} cellPadding={5}&gt;
                  &lt;thead&gt;
                    &lt;tr&gt;
                      &lt;td&gt;Key&lt;/td&gt;
                      &lt;td&gt;Value&lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                    Object.keys(this.birth_details).forEach(function (element) {
                    return &lt;tr&gt;&lt;td&gt;element&lt;/td&gt;&lt;td&gt;this.birth_details[element]&lt;/td&gt;&lt;/tr&gt;;
                    });
                  &lt;/tbody&gt;
                &lt;/table&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>For reference, This is the output of JSON:-</p>
  
  <pre><code>{"year":2019,"month":2,"day":11,"hour":12,"minute":59,"latitude":19.22,"longitude":25.2,"timezone":5.5,"gender":" ","name":" ","seconds":0,"ayanamsha":24.124044280610406,"sunrise":"10:19:50","sunset":"21:47:13"}
  </code></pre>