[Chartjs]-How can I ref the current state of an element with forwardRef in react?

by

1👍

✅

in JSX, only the official tags can accept ref prop by default. the components must be created by forwardRef function to be able to accept ref prop.

here is what you should do with WbrChart to make it work:

import React, { forwardRef } from "react";

const WbrChart = forwardRef(({ data }, ref) => {
  return <Line ref={ref} options={options} data={data} />;
});

WbrChart.displayName = "WbrChart" // you must set a `displayName` for debugging cases manually, because `forwardRef` is not smart enough to get it from the component name

now, you can pass ref prop as you already did:

<WbrChart ref={ref} data={chartonedata} />

you can also check and test it from my cloned code sand box here:
https://codesandbox.io/s/damp-tdd-wnqnd5?file=/src/App.js

Leave a comment