dataKey - "Functions are not valid as a React child" #3749
Assignees
Labels
bug
General bug label
Comments
8 tasks
ckifer
pushed a commit
that referenced
this issue
Sep 12, 2023
…en a function is passed as the payload #3749 (#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 #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 #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.
GMer78
pushed a commit
to GMer78/recharts-1
that referenced
this issue
Nov 24, 2023
…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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Reproduction link
Steps to reproduce
Use a callback function as the value for the dataKey prop in any of the Cartesian components (Bar/Line/etc.) as implied in the API docs.
(Update: The error only occurs when also rendering the
<Legend/>component)What is expected?
I expected to be able to access values using the callback function without any errors logged to the console.
What is actually happening?
The chart is rendering the values correctly. However, there is a console warning from React stating the following:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.The documentation that led me to running into this is shown here: https://recharts.org/en-US/api/Line#dataKey
The text was updated successfully, but these errors were encountered: