How to display multiple tags in reactjs?

Question

I have made a add new user CARD which has a plus sign on it. I have made additional cards which display username on each card. The cards which display username are displayed using .map() method. Now if I insert part 1 code (see below) inside the .map() function then it displays multiple add new user card. My final goal is to display single add new user card and use .map() to display remaining cards.

Part 1 code:

<div className="item-card add" onClick = {this.addUser} >
  <img src={require("../../images/plus.svg")} className="plus-icon"/>
  <div className="lbl">Add a new User</div>
</div>

If I insert above code inside .map() it displays multiple add new user card.

Where should I insert the part 1 code inside displayUsers() method ?

displayUsers() {
  return this.state.userList.map(user => {
    return (
      <div className="item-card">
        <div className="info">
          <div className="username">Username: {user.userName}</div>
        </div>
        <div className="del-wrap">
          <img src={require('../../images/cancel.svg')} />
        </div>
      </div>
    );
  });
}

Answer 1

I assume render returns the result of displayUsers.

Three answers:

• In React < v16, you have to wrap them in an element (for instance, a wrapper div).
• In React >= v16, you can return an array as you're doing, but you'll need to give them unique keys.
• In React >= v16.2, you can use <React.Fragment> instead and not give them keys.

Wrapper:

displayUsers(){
    return (
        <div>
        {this.state.userList.map( user => {
            return(
                <div className="item-card">
                    <div className="info">    
                        <div className="username">Username: {user.userName}</div>
                    </div>
                    <div className="del-wrap">
                        <img src={require("../../images/cancel.svg")}/>
                    </div>
                </div>
            );
        })}
        </div>
    );
} 

Array with unique keys:

displayUsers(){
    return this.state.userList.map(user => {
        return(
            <div key={user.???} className="item-card">
                <div className="info">    
                    <div className="username">Username: {user.userName}</div>
                </div>
                <div className="del-wrap">
                    <img src={require("../../images/cancel.svg")}/>
                </div>
            </div>
        );
    });
} 

Note the key={user.???}, obviously pick a unique aspect of the user object to use.

<React.Fragment>:

displayUsers(){
    return (
        <React.Fragment>
        {this.state.userList.map(user => {
            return(
                <div key={user.???} className="item-card">
                    <div className="info">    
                        <div className="username">Username: {user.userName}</div>
                    </div>
                    <div className="del-wrap">
                        <img src={require("../../images/cancel.svg")}/>
                    </div>
                </div>
            );
        });
        </React.Fragment>
    );
} 

Answer 2

You would use the Add user card separate from map render.

In version 16.2.0 or above you can return multiple elements by wrapping them in a React.Fragment

displayUsers(){

    return (
       <React.Fragment>
        <div className="item-card add" onClick = {this.addUser} >
           <img src={require("../../images/plus.svg")} className="plus-icon"/>
           <div className="lbl">Add a new User</div>
       </div>
      {this.state.userList.map( user => {
      return(
            <div className="item-card">
                <div className="info">    
                    <div className="username">Username: {user.userName}</div>
                </div>
                <div className="del-wrap">
                    <img src={require("../../images/cancel.svg")}/>
                </div>
            </div>
        );
    })}
    </React.Fragment>
  )
} 

Between v16.0.0 to 16.2.0, you would return them as array like

displayUsers(){

    return ([
        <div className="item-card add" onClick = {this.addUser} >
           <img src={require("../../images/plus.svg")} className="plus-icon"/>
           <div className="lbl">Add a new User</div>
       </div>,
      {this.state.userList.map( user => {
      return(
            <div className="item-card">
                <div className="info">    
                    <div className="username">Username: {user.userName}</div>
                </div>
                <div className="del-wrap">
                    <img src={require("../../images/cancel.svg")}/>
                </div>
            </div>
        );
    })}
    ]
  )
} 

and before v16, you would wrap them in a container div since you could only return a single element.

displayUsers(){

    return (
       <div>
        <div className="item-card add" onClick = {this.addUser} >
           <img src={require("../../images/plus.svg")} className="plus-icon"/>
           <div className="lbl">Add a new User</div>
       </div>
      {this.state.userList.map( user => {
      return(
            <div className="item-card">
                <div className="info">    
                    <div className="username">Username: {user.userName}</div>
                </div>
                <div className="del-wrap">
                    <img src={require("../../images/cancel.svg")}/>
                </div>
            </div>
        );
    })}
    </div>
  )
} 

Answer 3

Try this:

displayUsers(){
 return (
  <React.Fragment>
    <div className="item-card add" onClick = {this.addUser} >
    <img src={require("../../images/plus.svg")} className="plus-icon"/>
      <div className="lbl">Add a new User</div>
    </div>
  {
    this.state.userList.map( user => {
      return(
            <div className="item-card">
                <div className="info">    
                    <div className="username">Username: {user.userName}</div>
                </div>
                <div className="del-wrap">
                    <img src={require("../../images/cancel.svg")}/>
                </div>
            </div>
        );
    })
 }
  </React.Fragment>
 )}