Unable to pass value of props in React component - reactjs

Question

I am trying to iterate over a list of json values and create cards based on that. I tried many approaches but feel I am missing something while accessing props in my components.
Below is my JSON
let mockdata = {values : [{name : 'John'}, {name: 'Mike'}, {name : 'Sam'}]};
This is how my app.js looks like. I am importing cardcontainer in the app.
class App extends Component {
state = {
items: []
}
componentDidMount() {
fetch(endpoint)
.then(response => response.json())
.then(({values : items}) => this.setState({items}))
}
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Ping Pong Time Table</h1>
</header>
<div className="card-container">
<CardContainer/>
</div>
</div>
);
}
}
export default App;
This how my cardcontainer looks like
class CardBody extends React.Component {
render() {
return (
<div className="card-body">
<p className="date">March 20 2015</p>
<h2>{this.props.title}</h2>
</div>
)
}
}
class Card extends React.Component {
render() {
return (
<article className="card">
<CardBody title={this.props.value}/>
</article>
)
}
}
class CardContainer extends React.Component {
render(){
var info = this.props.items;
console.log(info);
var elements = [];
for(let val in info){
elements.push(<Card value={ info[name] } />);
}
return (
<div>
{elements}
</div>
);
}
}
export default CardContainer;
I have tried different approaches about this but somehow console.log(info) in cardcontainer gives undefined. Any help or pointers is greatly appreciated.
Thanks

Answer 1

You are not passing any properties to your CardContainer. To pass properties to a React component, you pass them like this:
class App extends Component {
state = {
items: []
}
componentDidMount() {
fetch(endpoint)
.then(response => response.json())
.then(({values : items}) => this.setState({items}))
}
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Ping Pong Time Table</h1>
</header>
<div className="card-container">
<CardContainer items={this.state.items} />
</div>
</div>
);
}
}
export default App;
You can pass as many properties as you like. These properties are available to the components on its this.props.

Answer 2

You have pass this.state.items as props to CardContainer and in CardContainer pass item.name to Card component
class App extends React.Component {
constructor() {
super();
this.state = {
items: [{name : 'John'}, {name: 'Mike'}, {name : 'Sam'}]
}
}
render(){
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Ping Pong Time Table</h1>
</header>
<div className="card-container">
<CardContainer items = {this.state.items} />
</div>
</div>
);
}
}
CardContainer
class CardContainer extends React.Component {
render(){
var info = this.props.items;
console.log(info);
var elements = info.map((item) => (<Card value={item.name} />));
return (
<div>
{elements}
</div>
);
}
}
The working code is available in https://codesandbox.io/s/woz4v2nxmw