How to create a react component dynamically-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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.