How to render multiple components with different component name?

Question

I have a few components, they have the same parameter with iterative values, like this:

import React from "react";
import Panel from "./Panel";
import Navbar from "./Navbar";

export default function App() {
  return (
    <div className="App">
      <Panel id={1} />
      <Navbar id={2} />
    </div>
  );
}

const Panel = ({ id }) => {
  return (
     <div>The id is {id}</div>
  );
};

const Navbar = ({ id }) => {
  return (
     <div>The id is {id}</div>
  );
};

Working example here: https://codesandbox.io/s/staging-pond-mpnnp

Now I'd like to use map to render those components at once in App.js, something like this:

export default function App() {
  const compnentArray = ['Panel', 'Navbar'];
  const RenderComponents = () => {
    let _o = [];
    return (
      componentArray.map((item, index) => _o.push(<{item} id={index} />))
    )
  }
  return (
    <div className="App">
      {RenderComponents()}
    </div>
  );
}

So that item renders component names. Is this possible?

Is this working for you or do you see any issues? Have you looked into the key attribute for each mapped component? — AGE
– AGE, Commented Jan 29, 2021 at 14:59

cbr · Accepted Answer · 2021-01-29 15:00:12Z

1

Sure, you could make use of Array.map()'s second parameter which gives you the index in the array:

import React from "react";
import Panel from "./Panel";
import Navbar from "./Navbar";

const components = [Panel, Navbar];

export default function App() {
  return (
    <div className="App">
      {components.map((Component, i) => (
        <Component key={i} id={i + 1} />
      ))}
    </div>
  );
}

As mentioned in React's documentation, to render a component dynamically, just make sure you assign it to a variable with a capital first letter and use it like you'd use any other component.

answered Jan 29, 2021 at 15:00

cbr

13.8k3 gold badges43 silver badges69 bronze badges

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

1 Comment

one-hand-octopus Over a year ago

Quite shocked to see that <Component ... /> is recognised by React and Component just equals to Panel and Navbar in this case.

Tam · Accepted Answer · 2021-01-29 15:04:16Z

0

You could swap strings with your actual component references and itererate over them directly in your JSX part, like this :

 export default function App() {
  const componentsArray = [Panel, Navbar];

  return (
    <div className="App">
      {componentsArray.map((Component, index) => <Component key={index} id={index + 1} />)}
    </div>
  );
}

Though I would suggest to memoize them to improve performance once you're confortable enough with React to start using memoization.

answered Jan 29, 2021 at 15:04

Tam

3322 silver badges5 bronze badges

Comments

secan · Accepted Answer · 2021-01-29 15:10:16Z

0

import React from "react";
import Panel from "./Panel";
import Navbar from "./Navbar";

const components = [Panel, Navbar]; // notice you are using the components as items, not strings;

/*
if the components need props from the parent,
the `renderComponents()` function should be declared
inside the parent component (and possibly with a `useCallback()`
hook, to avoid unnecessary re-declarations on re-renders)
*/
function renderComponents() {
  return components.map((comp, index) => <comp key={index} id={index} />) || null;
}

export default function App() {
  return (
    <div className="App">
      {renderComponents()}
    </div>
  );
}

edited Jan 29, 2021 at 15:10

answered Jan 29, 2021 at 15:03

secan

2,6771 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to render multiple components with different component name?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related