How do I duplicate an array with components?

Question

I'm trying to duplicate an Array and I want to change the props inside the component in an array. so this is my code:

 const chartArray = [
    <Line
      key="o"
      data={chartData[0]}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Bar
      key="p"
      data={chartData[0]}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Pie
      key="q"
      data={chartData[0]}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Radar
      key="r"
      data={chartData[0]}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Doughnut
      key="s"
      data={chartData[0]}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Scatter
      key="t"
      data={chartData[0]}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <PolarArea
      key="u"
      data={chartData[0]}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Bubble
      key="v"
      data={chartData[0]}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
  ];

I want to make another same const with a different name and I want to change the data like this:

const chartArray2 = [
    <Line
      key="o"
      data={chartData[1]}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Bar
      key="p"
      data={chartData[1]}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
     ....

I could do this with copy and paste but the thing is there are a lot of things such as <Bar> <Line> or something like that so what I want to do is just reduce my code.

const number = [0, 1, 2, 3, 4, 5, 6, 7, 8];
  const typeNum = number.map(num => type === num && chartArray[num]);
  const typeNum2 = number.map(num => type2 === num && chartArray2[num]);
  const typeNum3 = number.map(num => type3 === num && chartArray3[num]);
  const typeNum4 = number.map(num => type4 === num && chartArray4[num]);

What are you trying to achieve by creating constant? Cant you use a loop to handle this? Or you have some other requirement? — RABI
– RABI, Commented Jul 5, 2021 at 5:36
I need to pass to a component. and I need to use it separately — Somi
– Somi, Commented Jul 5, 2021 at 5:43
Can you update the question to include your another component where you will be using this? — RABI
– RABI, Commented Jul 5, 2021 at 5:46

RABI · Accepted Answer · 2021-07-05 06:03:00Z

2

You could create a const with parameter as follows

 const chartArray = (chartData) => [
    <Line
      key="o"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,
    <Bar
      key="p"
      data={chartData}
      options={{ responsive: true, maintainAspectRatio: false }}
    />,

and in the other component use it like

const number = [0, 1, 2, 3, 4, 5, 6, 7, 8];
  const typeNum = number.map(num => type === num && chartArray(chartData[0])[num]);
  const typeNum2 = number.map(num => type2 === num && chartArray(chartData[1])[num]);

answered Jul 5, 2021 at 6:03

RABI

7324 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Somi Over a year ago

OH ! It is possible !! thanks so much !! i hope u have a great day !! i will try this right now !!

RABI Over a year ago

Glad i could help and please let me know if it solved your issue

Somi Over a year ago

Omg that's perfectly worked !! Thank u so much !!! I really hope your day goes well !!

Somi Over a year ago

God bless you !!

RABI Over a year ago

God bless you too!!

Collectives™ on Stack Overflow

How do I duplicate an array with components?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related