Drawing our data in React

We already imported our Line component from our chart library. Let's render one instance inside of our Chart, passing it our data and scaled accessor functions.

xxxxxxxxxx

<Line

  data={data}

  xAccessor={xAccessorScaled}

  yAccessor={yAccessorScaled}

/>

If we inspect our webpage in the Elements panel, we can see a new <path> element.

Let's see what's going on in src/Chart/Line.jsx.

We have a basic element that renders a <path> element with a class name.

xxxxxxxxxx

const Line = ({ type, data, xAccessor, yAccessor, y0Accessor, interpolation, ...props }) => {

  return (

    <path {...props}

      className={`Line Line--type-${type}`}

    />

  )

}

Line accepts data and accessor props, along with a type string. A Line can have a type of "line" or "area" — it makes more sense to combine these two types of elements because they are more similar than they are different. There is one more prop (interpolation), which we'll get back to later.