Return a react element containing a value from an array according to another array of integer

Question

I have two array that contains an integer and strings like this.

let intArr = [4,3,2,1]
let player = ['a','b','c','d','e','f','g','h','i','j']

and the sum of intArr will always be the same as player's length

how do i return return a div as much as each number in intArr with player's value inside the div

expected :

since intArr index 0 is 4, the first div should be like this


<div>
   <div> a </div>
   <div> b </div>
   <div> c </div>
   <div> d </div>
</div>

and then for index 1 of intArr which is 3, it should return like this

<div>
   <div> e </div>
   <div> f </div>
   <div> g </div>
</div>

and so on

pass the both array into the html page and use 2 for loop. — Alvi15
– Alvi15, Commented Feb 2, 2023 at 2:27
Are you asking how to use loops? Are you asking how to create elements with Javascript? Are you asking how to look up an index of an array? What have you tried, and what are you having trouble with? What do you mean "return a div"? — Andy Ray
– Andy Ray, Commented Feb 2, 2023 at 2:30
I'm trying to return a react component with divs inside it and asking how to loop the two array together so it can get the value just like how i put the expected result in the question. sorry for the confusion — Dreynaldis
– Dreynaldis, Commented Feb 2, 2023 at 2:35

TJ Mora · Accepted Answer · 2023-02-02 03:15:10Z

2

First we need to group your letters:

let intArr = [4,3,2,1]
let player = ['a','b','c','d','e','f','g','h','i','j']

let acc = 0
const groups = intArr.map(len => {
  acc += len
  return player.slice(acc - len, acc)
})

The groups now has a value of [['a','b','c','d'],['e','f','g'],['h','i'],['j']]

Then we just output them like this:

return(
  <>
    {groups.map((group, i) => {
      return (
        <div key={i}>
            {group.map((letter, j) => {
              return <div key={j}>{letter}</div>
            })}
        </div>
      )
    })}
  </>
)

answered Feb 2, 2023 at 3:15

TJ Mora

711 silver badge4 bronze badges

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

Comments

Phil · Accepted Answer · 2023-02-02 02:48:16Z

If I understand correctly, intArr defines the slice or chunk length for each group in player.

You can get the result you want like this...

let offset = 0;
const slices = [];
for (const len of intArr) {
  slices.push(player.slice(offset, offset + len);
  offset += len;
}

You can iterate this in JSX to get your divs...

{slices.map((slice, sliceIndex) => (
  <div key={sliceIndex}>
    {slice.map((p, pIndex) => (
      <div key={pIndex}>{p}</div>
    ))}
  </div>
))}

If player and intArr are state values, you may want to wrap this in a memo hook so it recalculates if state changes.

const slices = useMemo(() => {
  let offset = 0;
  const arr = [];
  for (const len of intArr) {
    arr.push(player.slice(offset, offset + len);
    offset += len;
  }
  return arr;
}, [player, intArr]);

Collectives™ on Stack Overflow

Return a react element containing a value from an array according to another array of integer

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