Problem with recharts
Hello!
This is my MainPage.jsx:
import getHinnat from '@wasp/queries/getHinnat'
import { useQuery } from '@wasp/queries'
import logout from '@wasp/auth/logout'
import Chart from "./chart.jsx";
const MainPage = ({ user }) => {
const { data: hinnat, boolean: hinnatLoading, error: error2 } = useQuery(getHinnat)
return (
<div className="App">
How to use Recharts with React
<Chart data={hinnat} />
</div>
)
}
export default MainPage
and this is chart.jsx:
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
} from "recharts";
export default function Chart({ data }) { return ( <ResponsiveContainer width="100%" height={400}> <BarChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5, }} > <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="startDate" /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="price" fill="#8884d8" /> </BarChart> </ResponsiveContainer> ); }
export default function Chart({ data }) { return ( <ResponsiveContainer width="100%" height={400}> <BarChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5, }} > <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="startDate" /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="price" fill="#8884d8" /> </BarChart> </ResponsiveContainer> ); }
5 Replies
On accessing the page, I get this warning:
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
and this error:
react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at useState5 (react.development.js:1622:21)
at ResponsiveContainer.js:37:19
at renderWithHooks (react-dom.development.js:16305:18)
at updateForwardRef (react-dom.development.js:19226:20)
at beginWork (react-dom.development.js:21636:16)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at beginWork$1 (react-dom.development.js:27451:7)
at performUnitOfWork (react-dom.development.js:26557:12)
useState5 @ react.development.js:1622
(anonymous) @ ResponsiveContainer.js:37
Show 41 more frames
Any help? :=(
Works for me with some mock data? 🤷♂️
Here's the code I used: https://gist.github.com/infomiho/7975a834d18474286d4695ff296a0cd4
Can you please compare it to your code and let me know what's different? 🙏
Thanks!
I was missing the:
dependencies: [
("recharts", "^2.8.0")
]
ho-hum...
Great that you figured it out!