Putting children inside <Line> throws a React error

Putting any children (for example, a <LabelList> inside a <Line> component, or even just

<Line ... >
<div></div>
</Line>

throws the error:

react-dom.development.js?61bb:530 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.

I’ve been looking through the code, and found a few things out:

• If I dig around in the library code in node_modules/recharts/es6 and remove adaptEventHandlers(this.props) from line 158 inside the render method of shape/Curve, this error goes away
• If I look inside renderByOrder in utils/ReactUtils I can’t see any special handling of children of elements to be rendered, and similarly chart/generateCategoricalChart seems to have a map of types it can render as children, but seems to have no specification for any children

The API specifically states this is how, for example, to do LabelLists (http://recharts.org/en-US/api/LabelList) and I see no other way of doing this. I’m not a typescript expert and this codebase is rather complex, so I’m not sure I’ve hit upon exactly the right cause, but I hope this gives enough info for you to reproduce? This is a small gist of the sort of thing I was working on: https://gist.github.com/James-Reed-cognito/97fd00ace04865cb101f8bc40f8c41d4

Just as an fyi - putting the children into the <Line> does work - I can put a <LabelList> inside it, and it renders, it’s just that I get this very annoying react error on the console that clogs it up and clogs up tests too.

If you need any more info please do let me know.

[xile611]

Please open an issue follow the issue guide.

[James-Reed-cognito]

Hi all, I’ve opened a new issue following the guide here https://github.com/recharts/recharts/issues/2051 if you want to follow.