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

Question

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

Hey check this again, Now fixed. codesandbox.io/s/musing-kare-z2mk6c?file=/src/App.js — Faisal Nazik
– Faisal Nazik, Commented Apr 3, 2022 at 5:46

Faisal Nazik · Accepted Answer · 2022-04-03 21:39:21Z

1

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

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




const Main = () => {

const [index,setIndex] = React.useState(0); // Starting from the beginning 


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


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

const showDat = (data, index) => {
   return
    <p>{data[index].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(data, index)}

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

export default Main

Basically here is 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

edited Apr 3, 2022 at 21:39

Faisal Nazik

2,9635 gold badges25 silver badges46 bronze badges

answered Apr 3, 2022 at 4:36

jasonmzx

5275 silver badges18 bronze badges

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

2 Comments

atropa belladona Over a year ago

That not working , TypeError: Cannot read properties of undefined at showDat()

atropa belladona Over a year ago

I hv pushed into CodeSandbox can u help there codesandbox.io/s/musing-kare-z2mk6c?file=/src/App.js

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related