每个React组件的Console.log按钮功能

Question

如何在按下按钮时console.log一些文本？按钮显示每个组件，但我不明白为什么我不能在按下它们时发生事件。

这是我的代码：

import React, { Component } from 'react';
import airbnbs from './airbnbs.json';
import PropTypes from 'prop-types';

var Card = props => (
<div>
<div>
  <img src={props.image} height="164px" width="246px" alt=""></img>
  </div>
  <button onClick={this.addRental}>Add Rental</button>
      </div>
)

Card.propTypes={
image: PropTypes.string,
}


class Airbnblocation extends Component{
constructor(props){
    super(props);
    this.state= {
        locations: airbnbs
    };
    this.addRental = this.addRental.bind(this);
}

addRental = () => {
    console.log("hi");
}
render() {
    let locations = this.state.locations.map((locations, idx) => {
        return(
          <Card key={idx}
          image={locations.image}
          />
        )
  })
  return (
    <div>
      {locations} 
    </div>
  )
}
}

export default Airbnblocation;