Create React component with onlick from mapping json

JavaScript
#1

In my main App I’m trying to create a list of cards with a function by mapping the objects in a JSON file.

I made a seperate class/component called cardList that gets created during the mapping function:

import React, {
  Component
} from 'react';

//Pixabay doesn't allow hotlinking. So I'm using a placeholder image instead
import tempImage from './restaurant.jpeg';

class Card extends Component {
  openCard () {
    alert(this.name);
  }

  render() {
    return (
      <div>
      <h2>{this.name}</h2>
      <img src={tempImage}/>
      <button onClick={this.openCard}>info</button>
      </div>
    )
  }
}

export default Card;

Main App:

class App extends Component {

  render() {
    return (
      <div className = "App">
        <div>
        {
          data.map((source) => {
            return <Card source={source} key={source.id}/>
          })
          }
        </div>
      </div>
    );
  }
}

export default App;

The divs are all rendered, but none of the JSON information accessible in these components. Example this.name doesn’t render anything.

Anyone have any ideas how to go about this?

#2

this.props.source.name

#3

Thanks, worked!

Saved the source to state also changed the openCard function to:

  openCard = () => {
    alert(this.state.target.id);
  }
#4