Avoid looping multiple times the same array in React and JSX - html

Question

Suppose I have this array of objects:
const itensArray = [
{ "year": 2000, "text": "Lorem ipsum" },
{ "year": 2010, "text": "Hello World" },
{ "year": 2020, "text": "This is the end" }
];
Suppose it will be used to create elements in an timeline HTML structure, where the elements are separeted:
<div className="timeline-years">
<ul>{ yearsList }</ul>
</div>
<div className="timeline-texts">
<ul>{ textList }</ul>
</div>
I know one way to achieve this is to loop the same array two times:
const yearsList = itensArray.map(item =>
<li>{ item.year }</li>
);
const textList = itensArray.map(item =>
<li>{ item.text }</li>
);
How can I achieve the same result in one map only and using React and JSX?
The code below is wrong, but it illustrates what I want:
itensArray.map(item =>
let yearsList = <li>{ item.year }</li>
let textList = <li>{ item.text }</li>
);
Thanks!

Answer 1

If your target is to achieve this using only one loop then it could be a solution.
export default function App() {
const itensArray = [
{ "year": 2000, "text": "Lorem ipsum" },
{ "year": 2010, "text": "Hello World" },
{ "year": 2020, "text": "This is the end" }
];
const yearsList = []
const textList = []
itensArray.forEach((item)=>{
yearsList.push(<li>{ item.year }</li>)
textList.push(<li>{ item.text }</li>)
})
console.log(yearsList)
return (
<div className="App">
<ul>{yearsList}</ul>
<ul>{textList}</ul>
</div>
);
}

Answer 2

Dont afraid loop twice over one array, because data you should display in different places. You may preloop your array and assign your bunch of li elements as a const and put them in react fragments:
import React from 'react';
const itensArray = [
{ year: 2000, text: 'Lorem ipsum' },
{ year: 2010, text: 'Hello World' },
{ year: 2020, text: 'This is the end' },
];
function Component() {
const yearsList = (
<>
{itensArray.map((item) => (
<li>{item.year}</li>
))}
</>
);
const textList = (
<>
{itensArray.map((item) => (
<li>{item.text}</li>
))}
</>
);
return (
<>
<div className="timeline-years">
<ul>{yearsList}</ul>
</div>
<div className="timeline-texts">
<ul>{textList}</ul>
</div>
</>
);
}
export default Component;