React.js: How can I render a single component from an array?

Question

I have an array full of components called "componentPack". I'm trying to figure out how to render a certain component based on its index in the array.The part that is giving me trouble is rendering the component in JSX. To solve the problem I am using an intermediate array called "stager" that I push one component to and then map from:

var comp = stager.map((Component) => {
  return <Component />;
});

Is there anyway to pick a component directly from the original array?

Something like:

var comp = () => {return <{componentPack[3][2]} />;}

I feel as tho I do not really understand how JSX works in this case. Any help is greatly appreciated.

Shubham Khatri · Accepted Answer · 2017-04-15 04:56:06Z

2

You can just opt for conditional rendering from the map component like

var index = 3;
const component = componentPack.map((Component, idx) => {
    if(idx === index) {
         return <Component/>
    } else {
         return null;
    }
})

then your can just render it like

render() {
    return (<div>{component}</div>);
}

answered Apr 15, 2017 at 4:56

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Comments

Sasang · Accepted Answer · 2017-04-15 01:59:20Z

1

You can reference the jsx object directly. For example if you componentPack is an array of components like so:

const componentPack = [1, 2, 3, 4, 5].map((item) =>
  <Component/>
);

You can reference any individual element and get the specific component like:

render(){
  return componentPack[2] //Will return the third Component
}

answered Apr 15, 2017 at 1:59

Sasang

1,2819 silver badges10 bronze badges

Collectives™ on Stack Overflow

React.js: How can I render a single component from an array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related