title: Reactjs - How to load and map data in reactjs material table
body: <p>How to load and map data in reactjs material <a href="https://material-ui.com/components/tables/#tables" rel="nofollow noreferrer">Table</a>. I'm passing an object to child component via <code>Cards</code> component. when console log I can receive object from parent but it is throwing <code>failed to compile</code> error. Can anyone let me know where I made mistake? </p>
  
  <p><strong>Card.tsx</strong></p>
  
  <pre><code>function createData(type: any, description: any, volume: any) {
    return { type, description, volume };
  }
  
  class Card extends Component {
   constructor(props: any) {
      super(props);
      const rows = props.value.cargo;
      rows.map((data: any) =&gt; {
        createData(data.type, data.description, data.volume);
      });
    }
  
    render() {
      return (
        &lt;Card className="Card"&gt;
          &lt;CardContent className="Card-Content"&gt;
                &lt;Table className="Card-Content__Table"&gt;
                  &lt;TableHead&gt;
                    &lt;TableRow&gt;
                      &lt;TableCell&gt;type&lt;/TableCell&gt;
                      &lt;TableCell&gt;description&lt;/TableCell&gt;
                      &lt;TableCell&gt;volume&lt;/TableCell&gt;
                    &lt;/TableRow&gt;
                  &lt;/TableHead&gt;
                  &lt;TableBody&gt;
                    {rows.map(row =&gt; (
                      &lt;TableRow key={row.volume}&gt;
                        &lt;TableCell component="th" scope="row"&gt;
                          {row.type}
                        &lt;/TableCell&gt;
                        &lt;TableCell&gt;{row.description}&lt;/TableCell&gt;
                        &lt;TableCell&gt;{row.volume}&lt;/TableCell&gt;
                      &lt;/TableRow&gt;
                    ))}
                  &lt;/TableBody&gt;
                &lt;/Table&gt;
          &lt;/CardContent&gt;
        &lt;/Card&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Cards.tsx</strong></p>
  
  <pre><code>render() {
      return (
        &lt;div&gt;
          {this.state.card.map((card: any) =&gt; (
            &lt;Card key={card.id} value={card} /&gt;
          ))}
        &lt;/div&gt;
      );
    }
  </code></pre>