Tengo un componente Activity.js que estoy incorporando a mi componente App.js que representa actividades. Me gustaría agregar un evento onlick a un botón en este componente pasando una función como accesorio a ese botón, por alguna razón el botón no funciona, en este momento es un simple console.log para la lógica.

Las actividades se muestran cuando mapeo a través de la matriz de objetos, pero parece que el botón no está tomando los accesorios. ¿Alguien puede ayudarme a entender por qué la función deleteActivity no se ejecuta cuando hago clic en el botón?

Componente Acitivity.js

 import React, {Component} from 'react' export default function Activity(props) { return ( <div> <h1>Things I like to do </h1> {props.activities.map((activity) => ( <div key={activity.activity} style={{ display: "flex", justifyContent: "space-between" }}> <li >{activity.activity}</li> <button onClick={() => props.deleteActivity}>X</button> </div> ))} </div> ); }

Componente App.js

 import React, { Component } from 'react'; import ListContacts from './ListContacts'; import Activity from './Activity' class App extends Component { state = { activities : [ { id: 1, activity: "pool" }, { id: 2, activity: "games" }, { id: 3, activity: "sports" } ] } deleteActivity = ()=>{ console.log("hello") } render() { return ( <div> <Activity activities={this.state.activities} deleteActivity={this.deleteActivity} /> </div> ) }} export default App;