I am trying to render a popup when a card is clicked. My problem is that I can't get the showPopup function running on click of the card component.

//... all required imports 

class App extends Component {
  constructor() {
    super();

    this.state = {
      monsters: [],
      searchField: ''
    };
  }

  componentDidMount() {
    // Fetches monsters and updates the state (working fine)
  }

  showPopup = () => {
    console.log(2);
  };

  render() {
    const { monsters, searchField } = this.state;
    const filteredMonsters = monsters.filter(monster => monster.name.toLowerCase().includes(searchField.toLowerCase()));

    return (
      <div className="App">
        <CardList className="name" monsters={filteredMonsters} showPopup={e => this.showPopup(e)} />
      </div>
    );
  }
}

Following is the code for my CardList component

import React from 'react';
import { Card } from '../card/card.comp';
import './card-list.styles.css';

export const CardList = props => {
    return (
      <div className="card-list">
        {props.monsters.map(monster => (
          <Card key={monster.id} monster={monster} onClick={props.showPopup} />
        ))}
      </div>
    );
};

The onclick function above is not working as expected. Please help me find out the problem.

EDIT The code for card component

import React from 'react';

import './card.styles.css';

export const Card = props => {
  return (
    <div className="card-container">
      <img src={`https://robohash.org/${props.monster.id}?set=5&size=150x150`} alt="Monster" />
      <h2 key={props.monster.id}>{props.monster.name}</h2>
      <p>{props.monster.email}</p>
    </div>
  );
};