reactjs passing array of components

Question

I'm trying to pass an array of components to another components and render them after adding other props

import {ComponentB} from ".../ComponentB";


<ComponentA 
    list={[
       <ComponentB title={'title 1'} />,
       <ComponentB title={'title 2'} />,
       <ComponentB title={'title 3'} />
    ]} />

How to loop over list props in ComponentA ? this doesn't work :

// ComponentA

    { list.map((Item, index) => {
        return (
            <Item otherProps={'value xxx'}/>
        )
    })}

this yes but cannot add props

    { list.map((Item, index) => {
        return (
            {Item}
        )
    })}

Just to be clear, before // ComponentA, you have done var list = this.props.list? Otherwise, that list var is undefined. — HoldOffHunger
– HoldOffHunger, Commented Sep 2, 2020 at 15:22
list is defined, it's component props that i get in function declaration. i l will edit code:) — AlainIb
– AlainIb, Commented Sep 2, 2020 at 15:23
Go with the answer below -- you may want to pass a component instance, but a component itself? Probably not. — HoldOffHunger
– HoldOffHunger, Commented Sep 2, 2020 at 15:26
yes, i was trying to pass the components itself as we can do and use with props.children — AlainIb
– AlainIb, Commented Sep 2, 2020 at 16:55

CertainPerformance · Accepted Answer · 2020-09-02 15:35:33Z

8

Pass just the component, don't invoke the component in the parent: that way, the ComponentA can invoke the component with all the needed props:

<ComponentA 
    list={[
       { Comp: ComponentB, title: 'title 1' },
       { Comp: ComponentB, title: 'title 2' },
       { Comp: ComponentB, title: 'title 3' },
    ]}
/>

// ComponentA
{ list.map(
  ({ Comp, title }, index) => <Comp title={title} otherProps={'value'} />
)}

edited Sep 2, 2020 at 15:35

answered Sep 2, 2020 at 15:24

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

2 Comments

AlainIb Over a year ago

thanks this work. is there a way to avoid the json object declaration in list { Comp: ComponentB, title: 'title 1' } with <Comp param1 param2 .... /> ?

CertainPerformance Over a year ago

There's no such thing as a [JSON Object - this is just an array of objects, no JSON involved. You could use an array of arrays instead if you wanted, or if you know the components are all going to be the same, you could pass that as a separate prop and then have an array of titles.

AlainIb · Accepted Answer · 2020-09-03 08:10:50Z

0

another approche is to use children props and iterate over it :

<ComponentA>      
   <ComponentB title={'title 1'} />
   <ComponentB title={'title 2'} />
   <ComponentB title={'title 3'} />
</ComponentA>

// in componentA

 export function componentA({children}){
      let paramA = 'XYZ' ; 
      return (
            <div>
                {children?.map((child, i) => {
                    return (
                      <div key={i}>
                        {React.cloneElement(child, {paramA })}
                      </div>
                    );
                  })}
            </div>
      )

    }

but i don't kwow if cloning is expensive

answered Sep 3, 2020 at 8:10

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

Collectives™ on Stack Overflow

reactjs passing array of components

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related