CODEWITHSUNDEEP
javascriptreactjsasync-awaitreact-context
P. Nick
P. Nick

Reputation: 991

Can't await promise in map method

I'm trying to render a list of rooms and then get the user data of each recipient in the room, and since there only can be 2 users in the room (you + the other person), the recipient is just the other person.

async renderRooms(room, user) {
    const recipentId = room.users.filter(id => id != user.id)[0],
        recipients = await userService.getOne(recipentId);

    console.log(recipients)

    return (
        <ListGroupItem tag="a" href="#" data-unread="3" action key={room._id} onClick={this.onRoomOpened.bind(this, room._id)}>
            <img src={""} />
            <div className="details">
                <div className="recipient-name"></div>
                <div className="last-message">
                    <MessageCircle className="feather" />
                    This is an example last message...
                </div>
            </div>
        </ListGroupItem>
    );
}

render() {
    if(this.props.rooms.length < 1) return <LoadingPage />;

    return (
        <userContext.Consumer>
        {({user}) => {
            if(this.state.roomId) return <ActiveRoom id={this.state.roomId} />;
            else
                return (
                    <ListGroup className="recipients">
                        {this.props.rooms.map(room => this.renderRooms(room, user))}
                    </ListGroup>
                );
        }}
        </userContext.Consumer>
    );
}

This way I filter out my own user ID from the user array, and then I take the remaining ID and use a promise to get the user data for it. But the problem here is that whenever I call await it throws the error:

react-dom.development.js:14748 Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

If I try to use .then() it actually doesn't seem to be called at all, as in, if I put a console.log in there, it prints out nothing. Any idea how I can accomplish my task?

Upvotes: 2

Views: 794

Answers (1)

Vencovsky
Vencovsky

Reputation: 31625

You can't call an async function in the render method.

Async functions returns a Promise object, so this

{this.props.rooms.map(room => this.renderRooms(room, user))}

Will return an array of Promise Objects and you can't render and Object.

You need to call your async function in componentDidMount and render it when the data is loaded.

Check this answer for an example of what to do.

Upvotes: 5

Related Questions