How to show objects from array one by one , in single component-CodePudding

I'm trying to build a component who going to have multiple objects from the array.

I want to show them one by one. Let's assume, I have 3 objects inside the array. Then first object-related content should be shown first until the user opts to continue or skip for the next object until all 3 objects have been shown. How can I do this inside the One page?

For example, this is a minimal Code that how I'm going to make a component, I want to handle the Data like that each object should be shown independently and move to next on user input. Whether the user wants to skip or continue, the next object should be shown on the same page.

import { Fragment } from 'react'
import Data from 'Data'

const Main = () => {
  const data = [
    { id: 1, more: '...' },
    { id: 2, more: '...' },
    { id: 3, more: '...' }
  ]

  const submitHandler = () => {
    // some action
  }

  return (
    <Fragment>
      <Card style={{ minHeight: '40rem' }}>
        <Card.Body>{data ? data.map((el) => <div key={el.id} >
          <Data obj={el}  /> // Passing to child
        </div>) : null}
       </Card.Body>

        <Card.Footer>
          <Button variant="outline-danger" onClick={submitHandler} className="mx-1">
            Skip
          </Button>
          <Button variant="primary" onClick={submitHandler}>
            Continue
          </Button>
        </Card.Footer>
      </Card>
    </Fragment>
  )
}

export default Main

Edit: @jasonmzx below suggested some solution but it's giving type error. Can anybody fix this here , CodeSandBox

CodePudding user response：

Here you could use state to track which index the user is currently on, and render the output based off your array

import { Fragment, useState } from 'react';
import Data from 'Data';




const Main = () => {

const [index,setIndex] = React.useState([]);


  const data = [
    { id: 1, more: '...' },
    { id: 2, more: '...' },
    { id: 3, more: '...' }
  ]


//I'm making this a function for cleanliness
//This is render the array at index of state

const showDat = (data, index) => {
return(
<p>{data[i].more}</p>
)
}

  const submitHandler = () => {
    // Skip or cont: update state!
    setIndex(index 1);

  }

  return (
    <Fragment>
      <Card style={{ minHeight: '40rem' }}>
        <Card.Body>{data ? data.map((el) => <div key={el.id} >
          <Data obj={el}  /> // Passing to child
        </div>) : null}
       </Card.Body>

        <Card.Footer>
          <Button variant="outline-danger" onClick={submitHandler} className="mx-1">
            Skip
          </Button>
          <Button variant="primary" onClick={submitHandler}>
            Continue
          </Button>
        {showDat()}

        </Card.Footer>
      </Card>
    </Fragment>
  )
}

export default Main

Basically here what will happen (when you code the submitHandler); the submitHandler updates the state, the state adds 1 onto index, and since the state has updated, a re-render happens, meaning the showDat() function being called within the Main component's render is being called again with the new index, to display the next index in ur array