Rendering Multiple Instances of the Same Component - React

Question

I want to render multiple instances of the same component. Here is the component that will be repeated (not my actual component, just an example):

import React from 'react';

function Repeated () {
    return (
         <div></div>
    )
}

export default Repeated;

And the component that will repeat the other (again, just an example):

import React from 'react';
import Repeated from './Component1';

function OtherComp () {
    return (
         <div>
             <Repeated />
             <Repeated />
             <Repeated />
             <Repeated />
         </div>
    )
}

export default OtherComp;

Is there any way I can add the "Repeated" component multiple times through something like a loop, instead of having to copy and paste the component multiple times? Thanks :)

double-beep · Accepted Answer · 2022-10-25 20:13:38Z

6

You can create a new array of desired length and map it to the components. However, you have to add a key to every one of them or ignore a warning:

With warning:

return (
  <div>
    {Array(4).fill(<Repeated />)}
  </div>
)

Mapping to keys:

return (
  <div>
    {Array(4).fill(true).map((_, i) => <Repeated key={i} />)}
  </div>
)

edited Oct 25, 2022 at 20:13

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered Apr 13, 2022 at 20:16

Jakub Kotrs

6,2841 gold badge16 silver badges36 bronze badges

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

2 Comments

Akshay Kumar Over a year ago

Hi @JakubKotrs after rendering 4 times, let's suppose we want only 3 then how can I delete 4th one, in the same

Jakub Kotrs Over a year ago

You can make the 4 be a prop. ({ number }) => ...

André · Accepted Answer · 2022-04-13 20:20:11Z

1

If you have an array for example and want to render each element as Repeat you can write

import React from 'react';
import Repeated from './Component1';

function OtherComp () {

    // get array via fetch or something else

    return (
         <div>
             { array.map(item => <Repeated key={a-unique-key} item={item} />) }
         </div>
    )
}

export default OtherComp;

answered Apr 13, 2022 at 20:20

André

1396 bronze badges

Comments

sami_luftwaffe · Accepted Answer · 2022-04-13 20:21:45Z

1

You can loop through the array of props you want to render via the Repeated components, provided that each of the rendered components has a unique key The solution provided by @Jakub should work fine

answered Apr 13, 2022 at 20:21

sami_luftwaffe

315 bronze badges

Collectives™ on Stack Overflow

Rendering Multiple Instances of the Same Component - React

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related