I am trying to implement Presentational and Container Components pattern when creating React components. So I created a presentational component with only UI elements and container component with handling data capabilities.

### component.jsx

```
import React from "react";

const MyComponent = ({props}) => (
<div>
{props.games.map((game, index) => (
  <div key={index}>
    {game.index + 1} - {game.contestName}
  </div>
))};
</div>
);

export default MyComponent;

```

### container.jsx

```
import React, { Component } from "react";
import MyComponent from "./component";

class MyContainer extends Component {
constructor(props) {
super(props);

this.state = {
  games: [
    {
      id: 1,
      categoryName: "Business/Company",
      contestName: "Name1"
    },
    {
      id: 2,
      categoryName: "Magazine/Newsletter",
      contestName: "Name2"
    },
    {
      id: 3,
      categoryName: "Software Component",
      contestName: "Name3"
    },
    {
      id: 4,
      categoryName: "Website",
      contestName: "Name4"
    }
  ]
};
}

render() {
return (
  <div>
    <MyComponent games={this.state.games} />
  </div>
);
}
}

export default MyContainer;

```

However, I can not render data and I get 

### Uncaught TypeError:

> 
> Cannot read property 'games' of undefined. 
> 
> 
> 

Would really appreciate your help, as two days of internet digging has not yielded positive results.