Fix: "Functions are not valid as a React child" error in <Legend/> wh…

…en a function is passed as the payload recharts#3749 (recharts#3750)

<!--- Provide a general summary of your changes in the Title above -->
## Description
<!--- Describe your changes in detail -->
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
recharts#3749 
<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

## 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 recharts#3749. This ensures the payload is called if passed as a
function.

<!--- Why is this change required? What problem does it solve? -->

## How Has This Been Tested?
Unit tests included. Checks that values are correctly rendered both when
passed as static values and as a function.
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [x] 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:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

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

src/component/DefaultLegendContent.tsx

@@ -3,6 +3,7 @@
  */
 import React, { PureComponent, ReactNode, MouseEvent, ReactText, ReactElement } from 'react';
 import classNames from 'classnames';
+import _ from 'lodash';
 import { Surface } from '../container/Surface';
 import { Symbols } from '../shape/Symbols';
 import {
@@ -169,6 +170,7 @@ export class DefaultLegendContent extends PureComponent<Props> {
         return null;
       }
 
+      const entryValue = _.isFunction(entry.value) ? entry.value() : entry.value;
       const color = entry.inactive ? inactiveColor : entry.color;
 
       return (
@@ -182,7 +184,7 @@ export class DefaultLegendContent extends PureComponent<Props> {
             {this.renderIcon(entry)}
           </Surface>
           <span className="recharts-legend-item-text" style={{ color }}>
-            {finalFormatter ? finalFormatter(entry.value, entry, i) : entry.value}
+            {finalFormatter ? finalFormatter(entryValue, entry, i) : entryValue}
           </span>
         </li>
       );

test/component/Legend.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Legend, LineChart, Line } from '../../src';
 
 describe('<Legend />', () => {
@@ -67,4 +67,20 @@ describe('<Legend />', () => {
     expect(container.querySelectorAll('.recharts-default-legend .recharts-legend-item path')).toHaveLength(2);
     expect(container.querySelectorAll('.recharts-default-legend .recharts-legend-item line')).toHaveLength(0);
   });
+
+  test('Renders payload value correctly when passed as a static value', () => {
+    render(<Legend payload={[{ value: 'item name', type: 'line', id: 'ID01' }]} />);
+
+    const legendItem = screen.getByText('item name');
+    expect(legendItem).toBeInTheDocument();
+  });
+
+  test('Calls function before rendering if provided as a payload value', () => {
+    const getItemName = jest.fn().mockImplementation(() => 'item name');
+    render(<Legend payload={[{ value: getItemName, type: 'line', id: 'ID01' }]} />);
+
+    const legendItem = screen.getByText('item name');
+    expect(getItemName).toHaveBeenCalledTimes(1);
+    expect(legendItem).toBeInTheDocument();
+  });
 });