From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Creating chart section component

Creating chart section component - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Creating chart section component

“

Now, for better code readability and ease of debugging, we will create a separate component for the chart section. So I will create the file called ChartSection.jsx inside the dashboard folder. Now let me quickly create the chart section component which contains empty fragments and will also export it. Then I will go to the dashboard component and copy the JSX code of the chart section. Then I will go back to the chart section component and paste it. Now let me go to dashboard component and use the chart section component in place of charts. I'll pass the dashboard data as prop. Then I will go back to the chart section component and will receive the dashboard data from the props. I will also import the custom line chart component here. Let's save the code and check. And yes, charts are rendered from the component. Alright, so here we have completed the reports and analysis section. Now you are equipped with enough knowledge to be able to manage the reports on your own. You may choose…

Contents