Unable to parse props in child component

Question

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.

This answer explains, the solution to your problem https://stackoverflow.com/questions/44734548/what-is-the-children-prop-in-react-component-and-what-proptypes-do/44734573#44734573 — Shubham Khatri, Sep 13 '17 at 10:48

score 2 · Accepted Answer · answered Sep 13 '17 at 10:33

2

const MyComponent = ({props}) => (

When you do this, you actually do

{ props: props-received-from-parent }

You are enclosing your props in another object, remove those braces and change that line to

const MyComponent = (props) => (

and you are good to go.

answered Sep 13 '17 at 10:33

Aanchal1103

917
8
21

Thanks, so much, it helped. – Donatas Sep 13 '17 at 11:38

score 1 · Answer 2 · answered Sep 13 '17 at 10:32

You should destructure your games instead of props:

import React from "react";

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

export default MyComponent;

score 0 · Answer 3 · answered Sep 13 '17 at 10:58

You can define your MyComponent class like this

class MyComponent extends Component{

    render(){
        this.xyz = this.props.games.map((item,index) => {
            return(<div key={index}>{item.id}</div>)
        })
        return(
            <div>
                {this.xyz}
            </div>
        )

    }
}

export default MyComponent;

This will also work!

Unable to parse props in child component

component.jsx

container.jsx

Uncaught TypeError:

3 Answers3