• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

135
Vistas
El método no se activa al hacer clic en Reaccionar

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> ); };
about 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda