How to create a react component dynamically

Question

I am creating a Choose Your Own adventure browser game. I have realised that all the majority of the data that I want to fill the page (choices, selection etc...) I want to pull from my JSON and dynamically fill the page.

Still, I'll need to create components files to be able to create hooks routes to point at the components locations.

I am sure that there is a way to do this dynamically (instead than create every element manually), but I am pretty new of react, and it doesn't come up anything on top of my mind. I would gladly appreciate any help on the matter.

Example code of a page:

import React from "react";
import Navigation from "components/Navigation/Navigation";

const Page1 = () => {
    return (
        <>
            Page 1
            <Navigation room={1} />
        </>
    );
};

export default Page1;

The value of "room={1}" it is indicating the id of the json is where it will pull the info. I already built this and it works. So I just have to load a number that is growing progressively.

What I want to try to achieve it is to have this piece of component generated to X number of entries that I have in the JSON.

As well I need to generate dynamically this part of the code

<Routes>
    <Route path="/cyoa/page1" element={<Page1 />} />
    <Route path="/cyoa/page2" element={<Page2 />} />
    <Route path="/cyoa/page3" element={<Page3 />} />
    <Route path="/cyoa/page4" element={<Page4 />} />
</Routes>

If you could please point me on the right direction I would really appreciate it.

You can find the whole code over here: https://github.com/Littlemad/cyoa

AKX · Accepted Answer · 2022-11-01 14:57:32Z

1

Just pass the number as a prop:

function Page({number}) {
    return (
        <>Page {number} <Navigation room={number} /></>
    );
}
// ...
<Routes>
    <Route path="/cyoa/page1" element={<Page number={1} />} />
    <Route path="/cyoa/page2" element={<Page number={2} />} />
    <Route path="/cyoa/page3" element={<Page number={3} />} />
    <Route path="/cyoa/page4" element={<Page number={4} />} />
</Routes>

If you need to generate the Routes dynamically too, sure thing – just like you'd map over any data. Assuming you have an array of page numbers:

const pageNumbers = [1, 2, 3, 4];
// ...
<Routes>
    {pageNumbers.map(number => <Route key={number} path={`/cyoa/page${number}`} element={<Page number={number} />} />)}
</Routes>

answered Nov 1, 2022 at 14:57

AKX

171k16 gold badges146 silver badges228 bronze badges

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

Comments

Rohit Keshwani · Accepted Answer · 2022-11-01 15:09:07Z

1

You could do something like this: Have a page component like the first component you created without the numbers and pass through props for each thing that is dynamic or needs to change.

Have a Page Component:

export default function PageComponent(props) {
    return (<>
        { props.title }
        <Navigation room={ props.room } />
            </>);
}

Your JSON data needs to have everything different about each page.

Example JSON data

const data = [{
                 title: 'Page 1',
                 room: 1,
                 path: '/cyoa/page1',
              },
              {
                 title: 'Page 2',
                 room: 2,
                 path: '/cyoa/page2'
              }
             ];

Then for your routes, you can dynamically generate the path and the component rendered whose props change based on your data.

Your Routes

<Routes>
    {data.map(x=>{
        return <Route path={x.path} element={PageComponent(x)}/>
    })}
</Routes>

Hope this helps. Note I didn't actually compile and try this code. I wrote it off the top of my head.

answered Nov 1, 2022 at 15:09

Rohit Keshwani

336 bronze badges

2 Comments

Littlemad Over a year ago

I'll use for sure the idea about the title! Thx

Rohit Keshwani Over a year ago

You might also find this helpful as you build out your idea: beta.reactjs.org/learn/passing-data-deeply-with-context

Collectives™ on Stack Overflow

How to create a react component dynamically

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related