CODEWITHSUNDEEP
javascriptreactjsrouter
Max Hastings
Max Hastings

Reputation: 1

How to render a component that is passed as a prop in React?

I am tying to render my pages by using a loop instead of writing each of them separately. I made this array to store the information for my pages.

const pages = [
  { title: "Translate", url: "/translate", component: TranslatePage },
  { title: "Study", url: "/study", component: StudyPage },
  { title: "About", url: "/about", component: AboutPage },
  { title: "Home", url: "/", component: HomePage },
  { title: "Terms", url: "/study/terms", component: TermsPage },
];

For each page, I need to render it in this format:

        <Route
          path="/study"
          exact
          element={
            <StudyPage
              getDocuments={getDocuments}
              collectionRef={collectionRef}
              docs={docs}
            />
          }
        />

How can I render each page using currentPage.component to write the element part of the Route component? For each Component in my page array, I need to get

element={<ComponentReadFromPagesArray 
    getDocuments={getDocuments}
    collectionRef={collectionRef}
    docs={docs}
/>}

but I don't know how to pull the component from the array and then pass it in to element as its own component with props

Upvotes: 0

Views: 26

Answers (1)

jsejcksn
jsejcksn

Reputation: 33701

If I understand your question correctly, it'd be like this:

const routes = pages.map(({component: Page, url: path}) => {
  const element = (<Page {...{collectionRef, docs, getDocuments}} />);
  return (<Route {...{element, exact: true, path}} />);
});

Upvotes: 1

Related Questions