Estoy tratando de mostrar una ventana emergente cuando se hace clic en una tarjeta. Mi problema es que no puedo ejecutar la función showPopup al hacer clic en el componente de la tarjeta.

 //... 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> ); } }

El siguiente es el código para mi componente CardList

 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> ); };

La función onclick anterior no funciona como se esperaba. Por favor, ayúdame a encontrar el problema.

EDITAR El código para el componente de la tarjeta

 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> ); };