Iterate an array multiple times depending on user input with new index added

Question

import React, { useState } from 'react'
const data=["Red","Green","blue","orange","yellow"]

function App() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState([])

  const handleSubmit = (e) => {
    e.preventDefault()
    let amount = parseInt(count)
    if (count <= 0) {
      amount = 1
    }
   //for now hardcoding to show only 5 item
    if (count > 5) {
      amount = 5
    }
    setText(data.slice(0, amount))
  }

  return (
    <section >
      <h3>Generate Fun Ipsum</h3>
      <form  onSubmit={handleSubmit}>
        <label htmlFor='amount'>paragraphs:</label>
        <input
          type='number'
          name='amount'
          id='amount'
          value={count}
          onChange={(e) => setCount(e.target.value)}
        />
        <button  type='submit'>
          generate
        </button>
      </form>
      <article>
        {text.map((item, index) => {
          return <p key={index}>{item}</p>
        })}
      </article>
    </section>
  )
}

export default App

My query here is if user input value 8 then i should again reiterate the array and display 8 items

output should look like - "Red","Green","blue","orange","yellow","Red","Green","blue"

if user inputs 10 then output should be:

"Red","Green","blue","orange","yellow","Red","Green","blue","orange","yellow"

if user inputs 12 then output should be: "Red","Green","blue","orange","yellow","Red","Green","blue","orange","yellow","Red","Green"

I hope i am clear

Nenad Vracar · Accepted Answer · 2021-01-12 14:59:27Z

You could combine simple for loop with modulo operator % to get the desired result

const data=["Red","Green","blue","orange","yellow"]
const { useState } = React

function App() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState([])

  const handleSubmit = (e) => {
    e.preventDefault()
    let amount = parseInt(count)
    if (count <= 0) {
      amount = 1
    }
   
    const slice = []
    for (let i = 0; i < amount; i++) {
        slice.push(data[i % data.length])
    }
    
    setText(slice)
  }

  return (
    <section >
      <h3>Generate Fun Ipsum</h3>
      <form  onSubmit={handleSubmit}>
        <label htmlFor='amount'>paragraphs:</label>
        <input
          type='number'
          name='amount'
          id='amount'
          value={count}
          onChange={(e) => setCount(e.target.value)}
        />
        <button  type='submit'>
          generate
        </button>
      </form>
      <article>
        {text.map((item, index) => {
          return <p key={index}>{item}</p>
        })}
      </article>
    </section>
  )
}

ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

dbuchet · Accepted Answer · 2021-01-12 15:19:18Z

0

You can try something like that:

setText(
    Array.from({length: amount}).map((_, i) => data[i % data.length])
)

answered Jan 12, 2021 at 15:19

dbuchet

1,6511 gold badge7 silver badges7 bronze badges

Collectives™ on Stack Overflow

Iterate an array multiple times depending on user input with new index added

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related