When I console.log(title) I end up getting this object

recommendations.js

import React, { Component } from 'react'

class Recommendations extends Component {
  constructor (props) {
    super(props)
    this.state = {
      recommendations: [{
        url: 'google.com',
        pictureUrl: ' ',
        rating: -1,
        title: 'Yes',
        id: -1
      }, {
        url: 'google.com',
        pictureUrl: ' ',
        rating: -1,
        title: 'Yes',
        id: -1
      }, {
        url: 'google.com',
        pictureUrl: ' ',
        rating: -1,
        title: 'Yes',
        id: -1
      }]
    }
  }

  changeRating (title) {
    console.log(title)
    var ratingsChange = this.state.recommendations.slice()
    for (var i = 0; i < this.state.recommendations.length; i++) {
      if (title === this.state.recommendations[i].title) {
        ratingsChange[i].rating++
      } else {
        ratingsChange[i].rating--
      }
    }
    this.setState({
      recommendations: ratingsChange
    })
    // var currState = this.state
    console.log(this.state)
    var xhr = require('xhr')
    xhr.post('http://127.0.0.1:8000/home/rating/', { json: this.state }, function (err, resp) {
      if (err) {
        return console.log(err)
      }
      console.log(resp.body)
      return
    })
  }

  handleClick (e, title) {
    this.changeRating(title)
  }

  render () {
    return (
      <div className={'recommendations'} >
        <a href={this.state.recommendations[0].url} target='_blank' onClick={this.handleClick.bind(this, this.state.recommendations[0].title)}>
          <img src={this.state.recommendations[0].pictureUrl} alt={this.state.recommendations[0].title}/>
          <p>{this.state.recommendations[0].title}</p>
        </a>
        <a href={this.state.recommendations[1].url} target='_blank' onClick={this.handleClick.bind(this, this.state.recommendations[1].title)}>
          <img src={this.state.recommendations[1].pictureUrl} alt={this.state.recommendations[1].title}/>
          <p>{this.state.recommendations[1].title}</p>
        </a>
        <a href={this.state.recommendations[2].url} target='_blank' onClick={this.handleClick.bind(this, this.state.recommendations[2].title)}>
          <img src={this.state.recommendations[2].pictureUrl} alt={this.state.recommendations[2].title}/>
          <p>{this.state.recommendations[2].title}</p>
        </a>
      </div>
    )
  }

  componentWillMount () {
    var xhr = require('xhr')
    xhr.post('http://127.0.0.1:8000/home/', function (err, resp) {
      if (err) {
        return console.log(err)
      }
      var response = JSON.parse(resp.body)
      console.log(response)
      var copyRecommendations = []
      for (var i = 0; i < response.length; i++) {
        var recommendation = {
          url: response[i].fields.url,
          pictureUrl: response[i].fields.pictureurl,
          rating: response[i].fields.rating,
          title: response[i].fields.title,
          id: response[i].pk
        }
        copyRecommendations.push(recommendation)
      }
      this.setState({
        recommendations: copyRecommendations
      })
    }.bind(this))
  }
}

export default Recommendations

This is the object that gets logged

Proxy
[[Handler]]
:
Object
set
:
function (target, prop, value)
__proto__
:
Object
[[Target]]
:
SyntheticMouseEvent
altKey
:
(...)
bubbles
:
(...)
button
:
(...)
buttons
:
(...)
cancelable
:
(...)
clientX
:
(...)
clientY
:
(...)
ctrlKey
:
(...)
currentTarget
:
(...)
defaultPrevented
:
(...)
detail
:
(...)
dispatchConfig
:
null
eventPhase
:
(...)
getModifierState
:
(...)
isDefaultPrevented
:
null
isPropagationStopped
:
null
isTrusted
:
(...)
metaKey
:
(...)
nativeEvent
:
(...)
pageX
:
(...)
pageY
:
(...)
relatedTarget
:
(...)
screenX
:
(...)
screenY
:
(...)
shiftKey
:
(...)
target
:
(...)
timeStamp
:
(...)
type
:
(...)
view
:
(...)
_dispatchInstances
:
null
_dispatchListeners
:
null
_targetInst
:
null
preventDefault
:
(...)
stopPropagation
:
(...)
get altKey
:
function get()
set altKey
:
function set(val)
get bubbles
:
function get()
set bubbles
:
function set(val)
get button
:
function get()
set button
:
function set(val)
get buttons
:
function get()
set buttons
:
function set(val)
get cancelable
:
function get()
set cancelable
:
function set(val)
get clientX
:
function get()
set clientX
:
function set(val)
get clientY
:
function get()
set clientY
:
function set(val)
get ctrlKey
:
function get()
set ctrlKey
:
function set(val)
get currentTarget
:
function get()
set currentTarget
:
function set(val)
get defaultPrevented
:
function get()
set defaultPrevented
:
function set(val)
get detail
:
function get()
set detail
:
function set(val)
get eventPhase
:
function get()
set eventPhase
:
function set(val)
get getModifierState
:
function get()
set getModifierState
:
function set(val)
get isTrusted
:
function get()
set isTrusted
:
function set(val)
get metaKey
:
function get()
set metaKey
:
function set(val)
get nativeEvent
:
function get()
set nativeEvent
:
function set(val)
get pageX
:
function get()
set pageX
:
function set(val)
get pageY
:
function get()
set pageY
:
function set(val)
get relatedTarget
:
function get()
set relatedTarget
:
function set(val)
get screenX
:
function get()
set screenX
:
function set(val)
get screenY
:
function get()
set screenY
:
function set(val)
get shiftKey
:
function get()
set shiftKey
:
function set(val)
get target
:
function get()
set target
:
function set(val)
get timeStamp
:
function get()
set timeStamp
:
function set(val)
get type
:
function get()
set type
:
function set(val)
get view
:
function get()
set view
:
function set(val)
get preventDefault
:
function get()
set preventDefault
:
function set(val)
get stopPropagation
:
function get()
set stopPropagation
:
function set(val)
__proto__
:
SyntheticUIEvent
[[IsRevoked]]
:
false