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'},...]

devserkan · Accepted Answer · 2018-09-23 01:50:14Z

2

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>

edited Sep 23, 2018 at 1:50

answered Sep 23, 2018 at 1:12

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

7 Comments

devserkan Over a year ago

@Think-Twice, as you wish :)

Hemadri Dasari Over a year ago

Dear devserkan, correct me if I’m wrong, you missed key in loop and also map should have return syntax:(

devserkan Over a year ago

@Think-Twice I've added the key, thanks to you :) But, map does not need to have an explicit return statement here since I'm using the concise body not the block body. There aren't any curlies :)

Hemadri Dasari Over a year ago

Ok got it. I always used with curly { so got confused on that part. Thank you :)

devserkan Over a year ago

You are welcome. I mostly use the concise one if I don't do anything additionally before return :)

|

Collectives™ on Stack Overflow

Dynamically render react list with semantic UI

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related