title: Reactjs map function - iterate json object
body: <p>I'm trying to fecth data from <code>db.json</code> dispay it in <code>Cards</code>. There are two objects in <code>details</code> array so <code>Cards.tsx</code> suppose to generate two <code>SimpleCard</code>. It's throwing <code>this.state.card.map is not a function</code> this error. Can anyone let me know where I made a mistake ? </p>
  
  <p><strong>SimpleCard.tsx</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class ShipmentCard extends Component {
    render() {
      return (
        &lt;Card className="Card"&gt;
          &lt;CardContent className="Card-Content"&gt;
            &lt;Grid container spacing={3}&gt;
              &lt;Grid item xs={12}&gt;
                &lt;h3 className="Card-Content__Title"&gt;
                  title goes here
                &lt;/h3&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/CardContent&gt;
        &lt;/Card&gt;
      );
    }
  }
  
  export default ShipmentCard;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Cards.tsx</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  import ShipmentCard from "../card/Card";
  
  class Cards extends Component {
    state = {
      card: []
    };
    componentDidMount() {
      fetch("http://localhost:3001/details")
        .then(response =&gt; response.json())
        .then(data =&gt; {
          data.forEach((element: any) =&gt; {
            const shipments = element;
            this.setState({ card: shipments });
          });
        });
    }
    render() {
      return (
        &lt;div&gt;
          {this.state.card.map(card =&gt; (
            &lt;ShipmentCard key={card.id} /&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  
  export default Cards;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>App.tsx</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const App: React.FC = () =&gt; {
    return (
      &lt;React.Fragment&gt;
        &lt;CssBaseline /&gt;
        &lt;TopMenu /&gt;
        &lt;Cards /&gt;
      &lt;/React.Fragment&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>db.json</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "details": [
      {
        "id": "123",
        "name": "Heromisha",
        "services": [
          {
            "type": "customs"
          }
        ],
        "total": "1000",
        "status": "ACTIVE",
        "userId": "E222"
      },
      {
        "id": "456",
        "name": "Honda",
        "services": [
          {
            "type": "customs"
          },
          {
            "type": "insurance",
            "value": "100"
          }
        ],
        "total": "3000",
        "status": "ACTIVE",
        "userId": "E111"
      }
    ]
  }</code></pre>
  </div>
  </div>
  </p>