Using `Fragment` inside chart

Hi, I’m having an issue with dynamically rendering charts. Basically my data provides on each element information for 2 Line or Bar elements. So I would like to do a data.map and then render 2 Bars or Lines on each iteration. However, React/JSX requires me to wrap these elements in another element so preferably I’d wrap the two elements in a Fragment tag but if I do this nothing shows up in my chart.

My current code looks like this and this works fine:

<LineChart data={data}>
      <XAxis dataKey="timestamp" tickFormatter={tickFormatter} />
      <Tooltip content={renderLineTooltip} />
      {dataKeys.map((dataKey, index) => (
        <Line
          key={`${dataKey}-submitted`}
          strokeWidth={2}
          dataKey={`${dataKey}.submittedCount`}
          stroke={DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length]}
          connectNulls
        />
      ))}
      {dataKeys.map((dataKey, index) => (
        <Line
          key={`${dataKey}-delivered`}
          strokeWidth={2}
          dataKey={`${dataKey}.deliveredCount`}
          stroke={DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length]}
          connectNulls
        />
      ))}
    </LineChart>

However, preferably I’d like my code to look like this:

<LineChart data={data}>
      <XAxis dataKey="timestamp" tickFormatter={tickFormatter} />
      <Tooltip content={renderLineTooltip} />
      {dataKeys.map((dataKey, index) => (
        <Fragment>
          <Line
            key={`${dataKey}-submitted`}
            strokeWidth={2}
            dataKey={`${dataKey}.submittedCount`}
            stroke={DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length]}
            connectNulls
          />
          <Line
            key={`${dataKey}-delivered`}
            strokeWidth={2}
            dataKey={`${dataKey}.deliveredCount`}
            stroke={DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length]}
            connectNulls
          />
        </Fragment>
      ))}
    </LineChart>

This would prevent me from having to loop over the same array twice. 😃

Am I doing something wrong or is this kind of behavior not supported for some reason?

[lstuartfry]

I’ve got this issue as well. It looks like Recharts is using React v16.0. It has not yet upgraded to 16.2 or higher, so it doesn’t support the updated Fragments syntax. It does support the older Fragment syntax:

<AreaChart>
  [
    <Area key={1} />,
    <Area key={2} />,
  ]
</AreaChart>

Just be sure to 1) separate each element with a comma, and 2) give each component a proper ‘key’,

[xile611]

Sorry for not handling your issue in time, please try the latest version. If the problem persists, please open a new issue according to the issue guide.