getting at rechart's hover/tooltip data

Question

I am trying to get at the innards of the data object generated by recharts and used to populate their tooltips (so I can display it elsewhere). The image below shows the output of

console.log(data.payload[0]);

gained via a function placed on the Tooltip's content:

<Tooltip content={ this.showTooltipData.bind(this) } />

However, any attempt to get at the object components (Object.keys() returns the expected keys) fails with "undefined" or "null" references (edited for LiverpoolCoder ):

showTooltipData = (data) => {
  console.log(data.payload[0]);
  console.log(data.payload[0].color);
}

Uncaught (in promise) TypeError: Cannot read property 'color' of undefined
    at PlotCharts._this.showTooltipData (PlotCharts.js) (...)

Am I missing something here?

It still looks like a simple array. Given:

showTooltipData = (data) => {
  if ( typeof data.payload[0] !== 'undefined') {
    // console.log(data.payload[0].then(function(payload){ payload.color }));
    console.log(Object.keys(data.payload[0]));
    console.log("dataKey = " + data.payload[0]["datakey"]);
  }
}

I see, in the log (you can see in the output above that dataKey does contain a value):

EDIT: the code above works fine, "datakey" is a typo - moved to dataKey and it seems to work. For anyone else who got here via web search for the same issue - you HAVE to check (typeof as above) the existence of the data before accessing it - moving the mouse around creates and destroys the data constantly.

Answer 1

The answer is from above:

showTooltipData = (data) => {
  if ( typeof data.payload[0] !== 'undefined') {
    console.log(Object.keys(data.payload[0]));
    console.log("dataKey = " + data.payload[0]["dataKey"]);
  }
}

You HAVE to check (typeof as above is one way) the existence of the data before accessing it - moving the mouse around creates and destroys the data constantly.