title: My map function is not working in react js
body: <pre><code>import React, { Component } from &quot;react&quot;;
  import { TextField } from &quot;@material-ui/core&quot;;
  import SearchResult from &quot;./SearchResult&quot;;
  
  class Search extends Component {
      constructor() {
      super();
      this.state = {
          data: [],
      };
      this.renderRes = this.renderRes.bind(this);
      }
      handelTextFieldChange(e) {
      fetch(`http://localhost:8000/api/search-post?query=${e.target.value}`)
          .then((res) =&gt; res.json())
          .then((data) =&gt; {
          this.setState({
              data: data,
          });
          console.log(this.state.data);
          });
      }
      renderRes() {
      return (
          &lt;div&gt;
          {Array(this.state.data).map((_, index, blog) =&gt; {
              return (
              &lt;SearchResult
                  content={blog[index][&quot;body&quot;]}
                  date={String(blog[index][&quot;date&quot;])}
                  author={blog[index][&quot;author&quot;]}
                  title={blog[index][&quot;title&quot;]}
              /&gt;
              );
          })}
          &lt;/div&gt;
      );
      }
      render() {
      return (
          &lt;div id=&quot;search&quot;&gt;
          &lt;div className=&quot;search-box&quot;&gt;
              &lt;TextField
              id=&quot;outlined-basic&quot;
              label=&quot;Enter any Keyword&quot;
              variant=&quot;outlined&quot;
              onChange={(e) =&gt; this.handelTextFieldChange(e)}
              /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;search-results&quot;&gt;{this.renderRes()}&lt;/div&gt;
          &lt;/div&gt;
      );
      }
  }
  
  export default Search;
  </code></pre>
  <p>My fetch data ---&gt;</p>
  <pre><code>[
  {&quot;author&quot;: &quot;Pranav Tripathi&quot;,
   &quot;title&quot;: &quot;What is Diet?&quot;, &quot;body&quot;: &quot;In nutrition, diet is the sum of food consumed by a person or other organism.[1] The word diet often implies specific nutrition intake for health or weight-management reasons (with the two often being related). Although humans are omnivores, each culture and each person holds some food preferences or some food taboos. This may be due to personal tastes or ethical reasons. Individual dietary choices may be more or less healthy. Complete nutrition requires ingestion and absorption of vitamins, minerals, essential amino acids from protein and essential fatty acids from fat-containing food, also food energy in the form of carbohydrates, protein, and fat. Dietary habits and choices play a significant role in the quality of life, health, and longevity.&quot;, 
  &quot;date&quot;: &quot;2021-05-23 21:15:13.603332+00:00&quot;,
   &quot;post_id&quot;: &quot;ABCDEF&quot;}
  ]
  </code></pre>
  <p>There is more of it but I am sending the first one because others are mostly the same.</p>
  <p>When I was debugging. It mostly gives undefined.
  I have made the API in Django. From the backend side, it works well. But from the front end, it doesn't. I am fresher in react I am making the project to learn it, therefore, the react code is not industry standard</p>