Not able to display list items using map in reactjs?

Question

I have a userlist which contains name and email id of each user. I want to display it using the .map() method on userlist state variable. I have created displayusers() function to display the users but I am getting failed to compile error.

Code:

import React, { Component } from 'react';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
          userlist:[
          {'name':'Rohan Singh', 
           'email':'[email protected]'
          },

          {'name':'Mohan Singh', 
           'email':'[email protected]'
          },

          {'name':'Rakesh Roy', 
           'email':'[email protected]'
          },

          {'name':'Sunil Shah', 
           'email':'[email protected]'
          }]
    }
  }

  displayusers(){
        return this.state.userlist.map( user => {
          return(
            <div className="item-card">
               <div className="sub">    
                    <div className="type">Username: {user.name}</div>
                    <div className="members">Email: {user.email}</div>
               </div>
            <div className="del-wrap">
                <img src={require("../../images/cancel.svg")}/>
            </div>
           </div>
            );
        })
  }

  render() {
        return(
          <div className="users-wrap">
                <h1>Users</h1>
                <div className="task-content">
                    <div className="user-wrap">
                        <div className="users">
                             {this.displayusers()}
                        </div>
                    </div>
                </div> 
          </div>
        );
    }
}

export default App;

the displayUsers function which returns the jsx is missing a closing </div> tag — Mukesh Soni
– Mukesh Soni, Commented May 2, 2018 at 12:13

sunpietro · Accepted Answer · 2018-05-02 12:16:16Z

3

I think you forgot about adding a key attribute to the element and there's missing </div> closing tag in your map function.

See the corrected code:

displayusers(){
    return this.state.userlist.map( user => {
        return(
            <div className="item-card" key={user.name}>
                <div className="sub">    
                    <div className="type">Username: {user.name}</div>
                    <div className="members">Email: {user.email}</div>
                </div>
                <div className="del-wrap">
                    <img src={require("../../images/cancel.svg")}/>
                </div>
            </div>
        );
    });
}

answered May 2, 2018 at 12:16

sunpietro

2,0984 gold badges25 silver badges44 bronze badges

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

3 Comments

Umair Abid Over a year ago

key however recommended but isn't mandatory, problem seems to be with closing div

stone rock Over a year ago

@UmairAbid I have edited my question by adding <div>

Sebastian Scholle Over a year ago

@stonerock does it fix the error when you add the missing <div>?

Rohan Kangale · Accepted Answer · 2018-05-02 12:18:24Z

0

You need to bind your displayusers function to this. You can do that in the constructor.

Update your code as following:

import React, { Component } from 'react';

class App extends Component {

constructor(props){
 super(props);
 this.state = {
      userlist:[
      {'name':'Rohan Singh', 
       'email':'[email protected]'
      },

      {'name':'Mohan Singh', 
       'email':'[email protected]'
      },

      {'name':'Rakesh Roy', 
       'email':'[email protected]'
      },

      {'name':'Sunil Shah', 
       'email':'[email protected]'
      }]
  };

  this.displayusers = this.displayusers.bind(this); // you need to add this line
 }

 displayusers(){
    return this.state.userlist.map((user, index) => {
      return(
        <div className="item-card" key={index}>
           <div className="sub">    
                <div className="type">Username: {user.name}</div>
                <div className="members">Email: {user.email}</div>
           </div>
        <div className="del-wrap">
            <img src={require("../../images/cancel.svg")}/>
        </div>
        );
    })
}

render() {
    return(
      <div className="users-wrap">
            <h1>Users</h1>
            <div className="task-content">
                <div className="user-wrap">
                    <div className="users">
                         {this.displayusers()}
                    </div>
                </div>
            </div> 
      </div>
    );
  }
}

export default App;

edited May 2, 2018 at 12:18

answered May 2, 2018 at 12:15

Rohan Kangale

9914 gold badges11 silver badges31 bronze badges

3 Comments

sunpietro Over a year ago

I think it's wrong answer. The binding is not required here.

Umair Abid Over a year ago

why does it needs to bind context when the function is called with current context

stone rock Over a year ago

Yes I think ` bind` is not necessary here.

Collectives™ on Stack Overflow

Not able to display list items using map in reactjs?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related