折线图上的动态线反应js

Question

I'm trying to make dynamically line on line chart React.JS. For example, if you choose year from 2019 - 2019 you can get only 1 line on graph. But, if you choose 2019 - 2021 you can get 3 line on your graph. But, I don't know how to realize it. Anyone know how to make line dynamically?

{params.get("type") === "tahun" ? (<>{
      bayarBpjs.length != 0 && bayarBpjs.map(
        (_,index) => {
          return <><Link
            to="/detail-pemasukan"
            state={{
              labels: label,
              crumb: "Keuangan Tren\tPemasukan Detail",
              title: "Detail Tren Pemasukan Poli",
            }}
          >
            <div className="tren-pemasukan__tren__chart">
              
              <LineChart data={{
                labels: [],
                datasets: [
                  {
                    label: poli,
                    data: bayarBpjs[index],
                    borderColor: "green",
                    backgroundColor: "green",
                  },
                ],
              }} options={options(tanggal[index])}/>
              {isLoading}
            </div>
          </Link></>
        }
      )
      }

Answer 1

You could store an array of years selected in state. Then map over them and render a LineChart for each element in the map.

Something like:

const [selectedDates, setSelectedDates] = useState([])

// set the selected date ranges on user input or however you're doing it
<Button onClick={(dates)=> setSelectedDates(dates)} />

// render your LineGraphs by mapping over the selectedDates 
return (
{selectedDates.map((date) => 
  <div>
    <LineChart .../>
  </div>
))};
)