The argument must be a React element, but you passed undefined

Question

I am trying to use ResponsiveContainer from recharts in a react and getting this error.

React.cloneElement(...): The argument must be a React element, but you passed undefined.

My Sample code:

import React from 'react';
import { ResponsiveContainer } from 'recharts';

function App() {
  return (
       <ResponsiveContainer>
       </ResponsiveContainer>
  );
}

Answer 1

You need to put a chart inside the container. ResponsiveContainer is not designed to work on its own, and will throw the error you're seeing if there is no child component.

Here's the example from the documentation:

<ResponsiveContainer width={700} height="80%">
  <AreaChart data={data}
    margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
    <XAxis dataKey="name" />
    <YAxis />
    <CartesianGrid strokeDasharray="3 3" />
    <Tooltip />
    <ReferenceLine x="Page C" stroke="green" label="Min PAGE" />
    <ReferenceLine y={4000} label="Max" stroke="red" strokeDasharray="3 3" />
    <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
  </AreaChart>
</ResponsiveContainer>