Chart components do not render when wrapped in custom components

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Open my minimal reproduction link

What is expected?

YAxis is displayed

What is actually happening?

YAxis is not displayed

Environment	Info
Recharts	v2.1.6
React	17.0.2
System	Mac
Browser	Chrome

---

I want to wrap chart components (like YAxis) up in my own components. I want to do this so that I can set some default behavior in my wrapper and then pass in some customisations.

For example

export const YAxisWrapper: React.FC<Props> = ({dataKey, label}) => (
  <YAxis dataKey={dataKey} allowDecimals={false} tick={tick}>
    <Label
      value={label}
      position='left'
      angle={-90}
      style={{ textAnchor: 'middle' }}
      offset={-25}
    />
  </YAxis>
);

However when I wrap rechats components up into my own components they are no longer displayed in the chart.

I have created a very simple sandbox example here. https://codesandbox.io/s/simple-bar-chart-forked-8f3jgg?file=/src/App.tsx

[jake-daniels]

@xile611 This issue is open for a quite long time now without any response from maintainers. Kind of a red flag.

@gsipos You can still create reusable pieces by creating function that returns JSX markup and then calling it in the “parent” markup.

function renderXAxis(params) {
   return (
      <some-markup>
   )
}   

// parent scope
return (
   <div>
      {renderXAxis(params)}
   </div>
)

But this approach lacks all the features of react component.

[gsipos]

This is particularly painful because it makes hard to reuse bits and pieces between chart components, and I feel like I’m forced to repeat myself. For example I’m creating multiple variations of bar charts, that have basically everything(axis, tooltip, bars) styled according to app design, but the variants have a lot in common.

I’ve encountered this issue with XAxis, YAxis, Tooltip.