How to render list items in reactjs

Question

I am using List to render the data vertically. Docs suggests a way for hardcoded data but I have data in an array.

Docs have this example :

<MobileTearSheet>
  <List>
    <ListItem primaryText="Inbox" leftIcon={<ContentInbox />} />
    <ListItem primaryText="Starred" leftIcon={<ActionGrade />} />
    <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
    <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
    <ListItem primaryText="Inbox" leftIcon={<ContentInbox />} />
  </List>
  <Divider />
  <List>
    <ListItem primaryText="All mail" rightIcon={<ActionInfo />} />
    <ListItem primaryText="Trash" rightIcon={<ActionInfo />} />
    <ListItem primaryText="Spam" rightIcon={<ActionInfo />} />
    <ListItem primaryText="Follow up" rightIcon={<ActionInfo />} />
  </List>
</MobileTearSheet>

I have todos array which I want to render in a ListItem. Can anyone suggest me how to do ?

this.state = {
  open: false,
  todos: [],
  notetext: ""
};

I am adding elements in an array as below:

todos.push({
  id: todos.length,
  text: this.state.notetext,
  completed: false
});

So you want to render each todo in a list item? You should use the Array object's map function to iterate over the array and create new ListItems that are passed each todo to their props. — Michael Lyons
– Michael Lyons, Commented Jun 13, 2017 at 16:53
text of todos items you want as primaryText ? what about the right icon? — Mayank Shukla
– Mayank Shukla, Commented Jun 13, 2017 at 16:53

Mayank Shukla · Accepted Answer · 2017-06-13 17:06:31Z

4

Use map to iterate the todos array, then for each item of the array create a ListItem element.

Write it like this:

_renderTodos(){
    return this.state.todos.map(el => {
        return <ListItem primaryText={el.text} key={el.id}/>
    })
}

render(){
    return(
        <MobileTearSheet>
            <List>
                {this._renderTodos()}
            </List>
        </MobileTearSheet>
    )
}

Check this snippet:

class App extends React.Component{
    
     constructor(){
        super();
        this.state = {
           a: [1,2,3,4]
        }
     }
  
     _renderItems(){
         return this.state.a.map(el => <p>{el}</p>)
     }
     
     render(){
        return(
            <div>
                {this._renderItems()}
            </div>            
        )
     }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<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='app'/>

edited Jun 13, 2017 at 17:06

answered Jun 13, 2017 at 16:58

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

14 Comments

Michael Lyons Over a year ago

He'll have to bind this to _renderTodos if he's using ES6 classes.

Mayank Shukla Over a year ago

@MichaelLyons not required, i am simply calling that method, calling method will always the the reference of object from where it get called.

Michael Lyons Over a year ago

Well you're referencing this.state.todos from within the method, the context will have to be bound.

Mayank Shukla Over a year ago

@MichaelLyons run that code, it will work without any error, binding of a simply called method is not required :)

N Sharma Over a year ago

Thanks. Is this rule to use _ before function name ?

|

Ji aSH · Accepted Answer · 2017-06-13 16:59:23Z

0

Iterate on your array with something like that:

_buildItem(item, index) {
    return <ListItem key={index} primaryText={item.text}/>
}

render() { return (
    <List>
        {this.state.todos.map(this._buildItem)}
    </List>
)}

answered Jun 13, 2017 at 16:59

Ji aSH

3,4841 gold badge12 silver badges20 bronze badges

1 Comment

Ji aSH Over a year ago

well an answer poped meanwhile, and its almost the same xD

Collectives™ on Stack Overflow

How to render list items in reactjs

2 Answers 2

14 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related