https://www.youtube.com/watch?v=khJlrj3Y6Ls I am following this tutorial
here in there is a page on which chart data is shown, I want to display a duplicate line chart called "linechart2" just below the linechart..
this is my index.js of chart file
import React, { useState, useEffect } from "react"; import { Line, Bar } from "react-chartjs-2"; import { fetchDailyData } from "../../api"; import styles from "./Chart.module.css"; const Chart = ({ data: { confirmed, recovered, deaths }, country }) => { const [dailyData, setDailyData] = useState({}); useEffect(() => { const fetchMyAPI = async () => { const initialDailyData = await fetchDailyData(); setDailyData(initialDailyData); }; fetchMyAPI(); }, []); const barChart = confirmed ? ( <Bar data={{ labels: ["Infected", "Recovered", "Deaths"], datasets: [ { label: "People", backgroundColor: [ "rgba(0, 0, 255, 0.5)", "rgba(0, 255, 0, 0.5)", "rgba(255, 0, 0, 0.5)", ], data: [confirmed.value, recovered.value, deaths.value], }, ], }} options={{ legend: { display: false }, title: { display: true, text: `Current state in ${country}` }, }} /> ) : null; const lineChart = dailyData[0] ? ( <Line data={{ labels: dailyData.map(({ date }) => date), datasets: [ { data: dailyData.map((data) => data.confirmed), label: "Infected", borderColor: "#3333ff", fill: true, }, { data: dailyData.map((data) => data.deaths), label: "Deaths", borderColor: "red", backgroundColor: "rgba(255, 0, 0, 0.5)", fill: true, }, ], }} /> ) : null; const lineChart2 = dailyData[0] ? ( <Line data={{ labels: dailyData.map(({ date }) => date), datasets: [ { data: dailyData.map((data) => data.confirmed), label: "Infected", borderColor: "#3333ff", fill: true, }, { data: dailyData.map((data) => data.deaths), label: "Deaths", borderColor: "red", backgroundColor: "rgba(255, 0, 0, 0.5)", fill: true, }, ], }} /> ) : null; return ( <div className={styles.container}>{country ? barChart : lineChart}</div> ); }; export default Chart; I want to display a copy of lineChart just below it,I have tried writing it in the return fucntion
return ( <div className={styles.container}>{country ? barChart : lineChart}</div> <div className={styles.container}>{lineChart2}</div> ); 
