Create React component with onlick from mapping json

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?

this.props.source.name

Thanks, worked!

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

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