通过一次数据迭代创建多个项目

Question

i have the following react code:

function Hello () {
  let items = ["red","green","blue","#369","#fed","dad","grey","wheat","#a34","#d00"];
  return (
    <div>
      <ul>
      {items.map((v)=><li style={{border: `1px solid ${v}`, width: "10px", height: "10px", "border-radius": "50%", display: "inline-block"}}></li>)}
      </ul>
    <ul>
      {items.map((v)=><li style={{border: `1px solid ${v}`}}>{v}</li>)}
    </ul>
     </div>
  )
}

as you can see, I'm iterating twice in order to create both lists, however, since the data they use is the same - I'd like a way to create it with a single pass.

Is it even possible? if not - does react optimizes the multiple pass in some way?

webpackbin

Answer 1

Solution using a for of instead of Array.map

function Hello () {
  const items = ["red","green","blue","#369","#fed","dad","grey","wheat","#a34","#d00"];
  const listOne = []
  const listTwo = []
  for (let v of items) {
   listOne.push(<li style={{border: `1px solid ${v}`, width: "10px", height: "10px", "border-radius": "50%", display: "inline-block"}}></li>)
   listTwo.push(<li style={{border: `1px solid ${v}`}}>{v}</li>)
  }
  return ( 
    <div>
      <ul>
       {listOne}
      </ul>
      <ul>
       {listTwo}
      </ul>
     </div>
  )
}