I have a Player component that maps several song names + images to several Song components.
My Player component code looks like this:

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

and my Song code looks like this:

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;

But for some reason, nothing happens when I click any of the buttons. Any ideas why?