How to map an array for the multi pages dynamically?-CodePudding

I'm not sure if someone has answered this question here, but I'm facing some difficulty to find answer for this question.

This is an example of my array:

{
   task_1: [.....],[.....],
   task_2: [.....],[.....],
   task_3: [.....],[.....]
}

each of this tasks has their items that render on different page, similar to quiz apps each task should have their separate page to be rendered, so my question is that is there any way to map those tasks dynamically instead of making duplicate pages for each of these tasks?

instead of this:

{task_1.map(items=>{
.....
})

-> click to next page

{task_2.map(items=>{
.....
})

i want this:

{dynamic.map(items=>{
.....
})
-> click to next page

note: this is an React Native app

CodePudding user response：

You would just have to use Object.keys() to retrieve the tasks as a separate array and map over those.

Then, just nest what you currently have inside of the result. Like so:

<div> 
    {/* Iterate over all of the tasks (object keys) */}
    { Object.keys(tasks).map(taskName => (
        <div key={taskName}>
            <!-- Essentially the same as task_1, task_2, etc... -->
            { tasks[taskName].map( items => ( ... )) }
            <a href="#">Click to next page...</a>
        </div>
    )) }
</div>

Technically, you could use Object.entries() instead of Object.keys() - but I tend to gravitate towards the latter since it gives me the option of using the object property as the key prop value.