CODEWITHSUNDEEP
javascriptarraysreactjs
hightides1973
hightides1973

Reputation: 527

map through array and return result

results currently rendered I am trying to print down the list of users who are using the server using map function in jsx. But i am not able to render and display the results.

In below code, i tried to map through sessions and return the list.


    render() {
        return (
            <div>
                {this.renderTableContent()}
            </div>
            );
    }

 renderTableContent() {
        return(
            <div>
                <ul className="session__table">
                    {this.renderActiveSessionContent()}
                    {this.renderTableButton()}
                </ul>
            </div>
        );
    }                  
    renderActiveSessionContent() {
        if (this.state.activeSessions) {
            this.state.activeSessions.map((session) => {
                return(
                    <div>
                        <li className="sessionsharing__table__name">{session.UserName}</li>
                        <li className="sessionsharing__table__application">{session.DisplayName}</li>
                        <li className="sessionsharing__table__status">{session.Status}</li>
                    </div>
                );
            }
            );
        }
    }
    renderTableButton() {
        return(
            <div>
                <li className="session__table__button">
                    <input type="button" className="session__button" onClick={this.JoinButton.bind(this)} value = "Text" />
                </li>
            </div>
        );
    }

User Application Status User1 xyz active User2 abc active

Upvotes: 0

Views: 57

Answers (3)

swadhera
swadhera

Reputation: 30

You need to return the object that you get from the map function , also whenever you use functions like map for markup, you should include the key attribute , so that react can differentiate between the same markups.

Ex: 

renderActiveSessionContent() {
    if (this.state.activeSessions) {
        return this.state.activeSessions.map((session) => {
            return(
                <div key = {session.UserName}>
                    <li className="sessionsharing__table__name">{session.UserName}</li>
                    <li className="sessionsharing__table__application">{session.DisplayName}</li>
                    <li className="sessionsharing__table__status">{session.Status}</li>
                </div>
            );
        }
        );
    }
    return null;
}

Upvotes: 0

hightides1973
hightides1973

Reputation: 527

 renderActiveSessionContent() {
        var sessionContent = [];
        if (this.state.activeSessions) {
            var sessionContentDetails = <div />;
            this.state.activeSessions.map((session) => {
                sessionContentDetails =
                    <div>
                        <li className="sessionsharing__table__name">{session.UserName}</li>
                        <li className="sessionsharing__table__application">{session.DisplayName}</li>
                        <li className="sessionsharing__table__status">{session.Status}</li>
                    </div>
                sessionContent.push(
                    { sessionContentDetails }
                );
            });
            return (
                <div>
                    {sessionContentDetails}
                </div>);
        }
    }

Upvotes: 1

Phillip
Phillip

Reputation: 6253

You don't return the results of this.state.activeSessions.map(...:

renderActiveSessionContent() {
  if (this.state.activeSessions) {
    this.state.activeSessions.map((session) => {
      return(
        <div>
          <li className="sessionsharing__table__name">{session.UserName}</li>
          <li className="sessionsharing__table__application">{session.DisplayName}</li>
          <li className="sessionsharing__table__status">{session.Status}</li>
        </div>
      );
    });
  }
}

Additionally, when mapping an array you should set a unique key property on each iteration. For example:

<div key={session.id}>
  <li className="session...

React should be complaining about it though ;) (You can use index if and only if the list of items is static and is never reordered such that the index in essence becomes the id of the given item)

Upvotes: 1

Related Questions