CODEWITHSUNDEEP
javascriptreactjs
atropa belladona
atropa belladona

Reputation: 524

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

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

Upvotes: 0

Views: 490

Answers (1)

jasonmzx
jasonmzx

Reputation: 517

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

Upvotes: 1

Related Questions