Tooltip payload not working in pieChart

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Tooltip doesn’t show payload’s array

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/qbmg1567/).

1. Visit the API page http://recharts.org/#/en-US/api/Tooltip, copy the payload’s example Use it for a pie chart, which I did in below fiddle http://jsfiddle.net/u172931e/

What is the expected behavior?

It should reflect the value passed in which is payload={[{ name: '05-01', value: 12, unit: 'kg' }]}

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Windows, Chrome. and latest version of Recharts

[lunalubra]

Let me explain it with more detail. Tooltip componente gets actived when you hover a part of the analytic. While inactive, it does not pass the props you would expect, this, sometimes, causes that when you hover to trigger active state, it, instead of passing the correct props, pass payload and label as undefined or [Array(0)]. To solve this, you need to use the content atribut and pass a react component that will recive the props from the tooltip component. After this, trigger the active state and render the values you want (sometimes is deep nested in the payload array you reicive with the props), in my case: <Tooltip payload={arrayOfCountries} content={props => { console.log(props.payload[0]?.payload?.payload); return ( <div> {props.payload[0]?.payload?.payload?.country}:{" "} {props.payload[0]?.payload?.payload?.value} </div> ); }} /> (Be sure to use some checking if exists operator like the ? or ?? or an if statement in order to access the deep nested content on the payload prop) Disclaimer: This is what i think actually happend, i may be wrong

[liege]

@havywu
render() { const { active } = this.props;

if (active) {   // **this is your problem**
  const { payload, label } = this.props;