[XYChart] <BarGroup> breaks when children are <React.Fragment>s

For reasons to do with accessing data from our redux store, I would like to have my <BarSeries> inside of a function component.

Unfortunately, the library will try to look at the < DataSetBar> component as the series it expects, then throw when the entry’s data is undefined.

Is there any way to work around this?

Here is my code (abridged):

function DataGroupBar({ dataGroup }) {
  return (
    <AnimatedBarGroup>
      {dataGroup.map((dataSet) => (
        <DataSetBar
          key={dataSet.rowId}
          dataSet={dataSet}
        />
      ))}
    </AnimatedBarGroup>
  )
}

function DataSetBar({ dataSet }) {
  const { rowId, color } = dataSet
  const reportItem = useSelector((state) => state.reports[rowId])

  const actualsData = dateRange.map((month) => ({
      x: dateParser(month),
      y: computeBalance(reportItem),
    }))

  const budgetsData = dateRange.map((month) => ({
      x: dateParser(month),
      y: computeBalance(reportItem),
    }))

  return (
    <>
      <AnimatedBarSeries
        dataKey={`${reportItem.name} Actuals`}
        data={actualsData}
        {...accessors}
      />

      <AnimatedBarSeries
        dataKey={`${reportItem.name} Budgets`}
        data={budgetsData}
        {...accessors}
      />
    </>
  )
}

Right now, the only way I can see here is to move everything into my <DataGroupBar> component, forcing me to access all of state.reports in redux which loses performance as it causes a re-render every time any row in there changes, opposed to accessing just the single row.

I feel like the library should be able to tell that <DataSetBar> resolves into 2 <AnimatedBarSeries> and access them directly.

[williaster]

Yeah this is because the <BarGroup /> expects its direct children to be <BarSeries />. Messing with / traversing children in React is a bit gross but seems like we should be able to create a helper function to traverse until a BarSeries component is found. Will try to look into this this week but don’t have a ton of bandwidth.

[tonyneel923]

I am running into this problem when dynamically generating bar series for a bar group and am not sure how to get around it.

Example code

<BarGroup padding={0}>
          {barChartsCollection.items.map((barChart) => {
            const vertical = xScale?.type === 'band';
            const { xAxis: currentXAxis, yAxis: currentYAxis } = barChart;
            return (
              <AnimatedBarSeries
                key={barChart.sys.id}
                dataKey={vertical ? currentYAxis : currentXAxis}
                data={items}
                xAccessor={(d: object) => vertical ? getLocValue(schema, d, currentXAxis) : getLocValue(schema, d, currentYAxis)}
                yAccessor={(d: object) => vertical ? getLocValue(schema, d, currentYAxis) : getLocValue(schema, d, currentXAxis)}
              />
            )
          })}
        </BarGroup>