Dynamically render react list with semantic UI

Question

I am having difficulty dynamically rendering this list using Semantic UI. I'm getting an unexpected token error, but I'm not really sure of how to make this work. Both users_titles and users_entries are arrays set in state, but mapped from redux, so they are the same length. The (non-working) code is below. I simply want a list ordered as (title-1..entry1, title2..entry2, etc ).

It looks like calling another component just to create the list seems unnecessary (and I'm still not really sure how it would work any better). I'm very new to react and JS, so any help would be appreciated. Thanks!

class UsersPosts extends React.Component
...
displayListPosts = () => {

  for (let index = 0; index < this.state.users_entries.length; index++) {
  //debugger
  <List.Item>
    <List.Icon name='file outline' />
    <List.Content>
      <List.Header >
        {this.state.users_titles[index]}
      </List.Header>
      <List.Description>
        {this.state.users_entries[index]}
      </List.Description>
    </List.Content>
  </List.Item>

 }
}

...

render() {
const { loaded } = this.state
if (loaded) {
  return (
    <List>
      { this.displayListPosts() }
    </List>
  )

UPDATE:

After getting help from the accepted answer, the working code looks like this:

displayListPosts = () =>
this.props.posts.map((el) => (

  <List.Item>
    <List.Icon name='file outline' />
    <List.Content>
      <List.Header >
        {el.title}
      </List.Header>
      <List.Description>
        {el.entry}
      </List.Description>
    </List.Content>
  </List.Item>
));

, where posts are a prop, in the form:

[ {id:1,title:'Quis.',entry:'Lorem'...},
{id:2,title:'Consequatur.',ent…:31.999Z'},
{id:3,title:'Laboriosam.',entr…:32.004Z'},
{id:4,title:'Eum.',entry:'Eaqu…:32.010Z'},
{id:5,title:'Reiciendis.',entr…:32.015Z'},
{id:6,title:'Nemo.',entry:'Qui…:32.020Z'},...]

Answer 1

It would be better if you can shape your data as an array of objects. Like:

[
  { title: "title1", entry: "entry1" },
  { title: "title2", entry: "entry2" }
]

With this shape, you can easily map your data and use the properties. But, if you want to do this with your current situation, you can map one property, then using index you can use the corresponding one since the lengths are equal. Do not use for loops, the .map method is your friend most of the time.

 class App extends React.Component { state = { user_titles: ["title1", "title2"], user_entries: ["entry1", "entry2"] }; displayListPosts = () => this.state.user_titles.map((el, i) => ( // Maybe, there is a better key :D <div key={`${el}-${this.state.user_entries[i]}`}> <p>Title: {el}</p> <p>Entry: {this.state.user_entries[i]}</p> </div> )); render() { return <div>{this.displayListPosts()}</div>; } } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>