React-vis: Using React.Fragment

[masquel]

I tried to render LineSeries and AreaSeries in one component using React.Fragment like this:

const ChartArea = ({color, data}) => {
  return (
    <React.Fragment>
      <AreaSeries
        color={color}
        data={data}
        opacity={0.25}
      />
      <LineSeries
        curve={null}
        stroke={color}
        data={data}
      />
    </React.Fragment>
  );
};

Then use it like:

<ChartArea color="#00F" data={data} />

inside XYPlot component and after render i got it out of svg.rv-xy-plot__inner with null data:

<path d="M0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0L0,0Z" class="rv-xy-plot__series rv-xy-plot__series--line " transform="translate(undefined,undefined)" style="opacity: 0.25; stroke: rgb(0, 0, 255); fill: rgb(0, 0, 255);"></path>

Also i tried g tag instead React.Fragment and got the same result.

[mcnuttandrew]

react-vis components aren't totally compose-able. I think in the future we could support Fragments (and I would gladly accept a PR to make it happen), but we don't right now. I think the word around would be to do something like

<XYPlot {...props}>
    {ChartArea({color: '#00f', data: data)}
</XYPlot>

With

const ChartArea = ({color, data}) => {
  return [
      <AreaSeries
        color={color}
        data={data}
        opacity={0.25}
      />
      <LineSeries
        curve={null}
        stroke={color}
        data={data}
      />
  ];
};

If you anticipate using a bunch of these ChartAreas at once then you could add a key as well? I think this should all work

[masquel]

@mcnuttandrew Yep, using function and returning and array works great, thanks a lot

[masquel]

I think, it would be great to add this code as example for reusable area components

[mcnuttandrew]

I would totally support adding this to the docs somewhere! If you find an appropriate place, I would gladly accept a PR. In the mean time I'm going to close this, as it seems like the issue has been addressed.

[JelleBlaauw]

@mcnuttandrew The array return method works, but this seems like a workaround, not a real solution. Please add fragment support. That would make it so much easier and cleaner.