Updating expandableRowsComponent to v7.0.0

[glaucoheitor]

I'm new to React and I might have oversaw something here, but when using expandableRowsComponent, if I pass JSX it works, but if I pass it as a function it gives me Warning: Failed prop type: Invalid prop children supplied to ExpanderRow.

I'm trying to update my code to v7.0.0

I'm importing the expandable component import { LineChart } from "./Charts"; on my DataTables component

This is the code for the expandable component:

export const LineChart = (props) => {
  const [dataChart, setDataChart] = useState(null);

  useEffect(() => {
    async function getData(id) {
      const dataAPI = await CoinGeckoClient.coins.fetchMarketChart(id);
      if (dataAPI.success) {
        const labels = dataAPI.data.prices.map((p) => p[0]);
        const data = dataAPI.data.prices.map((p) => p[1]);
        setDataChart({
          labels: labels,
          datasets: [
            {
              data: data,
              backgroundColor: "rgb(255, 99, 132)",
              borderColor: "rgba(255, 99, 132, 0.2)",
              fill: false,
            },
          ],
        });
      }
    }
    getData(props.data.idCoinGecko);
  }, []);
  return (
    <>
      {!dataChart && <p>Loading</p>}
      {dataChart && <Line data={dataChart} options={options} />}
    </>
  );
};

export default LineChart;

It may be somethig super stupid, so I apologise in advance.

[jbetancur]

No worries, make sure you are passing LineChart and not <LineChart /> What does your DataTable code look like?

[glaucoheitor]

Yes, I was default exporting only, the other export was a test. I was passing <LineChart /> on previous version with no issues, based on breaking changes on v7, I changed to LineChart and now it's giving me that error msg.

return (
    <DataTable
      theme="custom"
      title={title}
      actions={actions}
      columns={columns}
      data={data}
      customStyles={customStyles}
      defaultSortFieldId={6}
      defaultSortAsc={false}
      expandableRows={true}
      expandableRowsComponent={LineChart}
      pagination={pagination}
      responsive={responsive}
    />
  );

[jbetancur]

That's strange. My suspicion is perhaps you still have RDT 6.x running instead of v7. Can you just make sure you have fully upgraded? Make sure your package.json has version 7.0.0 and do an npm install or yarn If you use npm then delete any package-lock.json and delete node_modules and then npm install again.

[glaucoheitor]

Sorry for the huge delay on this. I thought I had responded, but I guess I forgot.

Anyways, next day when I came back to continue my work it was working, so I'm not sure what caused it, but I do appreciate your help!

[jbetancur]

No worries. I'll mark this issue as closed.