Tengo un componente de reproductor que asigna varios nombres de canciones + imágenes a varios componentes de canciones.
El código de mi componente Player se ve así:

 return ( <div className="App"> <div className="main-wrapper"> {props.foundASong && <div className="song_container">{props.songs.map((object, i) => <Song object={object} key={i} />)}</div> } <div className="background" style={backgroundStyles} />{" "} </div> </div> );

y mi código de canción se ve así:

 import React, { Component } from "react"; import "./Player.css"; import "./Song.css"; class Song extends Component { constructor(props) { super(props); this.state = { clicked: false }; this.changeBackground = this.changeBackground.bind(this); this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ clicked: !prevState.clicked })); console.log("clicked"); } render(props){ return ( <div> <button onClick={this.handleClick}>Click me!</button> <div className="song_box"> <img src={this.props.object.album.images[0].url} /> <div>{this.props.object.name}</div> </div> </div> ); } } export default Song;

Pero por alguna razón, no sucede nada cuando hago clic en cualquiera de los botones. ¿Alguna idea de por qué?