Skip to content
Advertisement

How I can show some element inline using method map?

I have such array: let arr = [1,2,3,4,5,6,7,8,9,10]

And I want to display the list of these numbers, so I made like this:

arr.map(el => {
  return (
    <div>{el}</div>
  )
})

So, and it gives me this output:

1
2
3
....

Could I show 3 elements per line?

123
456
789
...

Advertisement

Answer

let arr = [1,2,3,4,5,6,7,8,9,10];
let i = 0;
let myArray = [];
let resultArray = [];
arr.map(el => {
  myArray.push(el);
  i+=1;
  if(i==3){
  resultArray.push(myArray);
    myArray = [];
    i=0;
  }
})

if(myArray.length>0){
resultArray.push(myArray);
}

let myText="";
for(results in resultArray){
  for(result in resultArray[`${results}`]){
    myText+=resultArray[`${results}`][`${result}`];
  }
  myText+="<br>";
}

document.getElementById("myDiv").innerHTML = myText;
<div id="myDiv"></div>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement