Fix: "Functions are not valid as a React child" error in <Legend/> when a function is passed as the payload #3749

[chris-mcdonald-dev]

Description

Small changes checking if the payload provided to <Legend/> is a function and calling it as needed. Otherwise, the original value is rendered. Also added accompanying tests.

Related Issue

#3749

Motivation and Context

When a function was provided as a payload to the <Legend/> component, it was not getting called before being rendered resulting in the error described in #3749. This ensures the payload is called if passed as a function.

How Has This Been Tested?

Unit tests included. Checks that values are correctly rendered both when passed as static values and as a function.

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[ckifer]

LGTM, thank you!

[MateuszTrN]

hi, I'm not sure if I understood correctly, but I don't think this is correct fix. the fn that is provided expects an argument which is not provided here - yeah, it would fix the warning but I believe it won't work correctly @ckifer don't you agree?

SShot from a debbuger of a provided CodeSandbox within the issue

[ckifer]

I'm confused. This should work fine - I'll pull it down later and check

[MateuszTrN]

shouldn't it be something like
const entryValue = _.isFunction(entry.value) ? entry.value(entry) : entry.value;
or
const entryValue = _.isFunction(entry.value) ? entry.value(entry.payload) : entry.value;
?

in given example - in the issue, the reporter set the handler as below:
row => row.pv

in this example and current code - what is row? wouldn't it throw 'row is undefined' ?

I might be wrong though.

[ckifer]

yeah you're right, thanks for taking the extra care to check. Just need to fix this before the next release and should be okay

@chris-mcdonald-dev fyi

[chris-mcdonald-dev]

@MateuszTrN Yeah, thanks for catching that. Looking into a solution now. We won't be able to get it from the entry or payload for the Legend component, since that doesn't seem to contain the chart data and just the payload for the legend elements.

[ckifer]

we're really just trying to get the actual dataKey name here, not any actual values. When you have data => data.pv you don't really have great reference to the text pv

[chris-mcdonald-dev]

Good point. I can't see the point of this being a function directly passed to the Legend component either.

I'll spend some time thinking of a solution. The only initial idea I have is rendering an empty string when a function is derived from a chart component's dataKey and printing a warning message to the console saying to pass a payload value as a string to <Legend/> whenever that's the case.

Otherwise, I'm not sure how we'd have any way of knowing what that legend is supposed to be labeled since functions won't necessarily have to follow the format of () => someObject.theValue

[ckifer]

It does also use the "name" property before the dataKey property in the Legend. If the dataKey is a function we could print a warning that name is required for a label to appear in the legend

[chris-mcdonald-dev]

Ah true! I'll create an issue and open a matching PR with tests in a bit.

[ckifer]

I'm thinking we don't actually want the value prop of Legend to be able to be a function. We want it as a string, however we have to get it as a string somehow before the dataKey is passed to legend