conditional statements in a .map function returns nothing in React

Question

I'm trying to do conditional rendering on react and although the condition it's either true or false, the elements are not being rendered. What could be the problem? Thanks

    <section>
                                        <li className="top-nav__item top-nav__item--active">
                                            {state.profileData[0].likes.map((like) => {
                                                console.log(like) // outputs the user id and appState.user._id
                                                like.user === appState.user._id ? (
                                                    <Link
                                                        onClick={(e) => startLikingTweet(e, tweetPost)}
                                                        to="/"
                                                        className="top-nav__link"
                                                    >
                                                        <IcomoonReact
                                                            className="top-nav__icon"
                                                            iconSet={iconSet}
                                                            color="red"
                                                            size={20}
                                                            icon="heart"
                                                        />
                                                        <span>{tweetPost.likes.length}</span>
                                                    </Link>
                                                ) : (
                                                    <a>hey</a>
                                                );
                                            })}
                                        </li>
                                    </section>

Does this answer your question? [Map method is not rendering components in React.js](https://stackoverflow.com/questions/70361452/map-method-is-not-rendering-components-in-react-js) — Youssouf Oumar, Jul 20 '22 at 18:36
Remember that you need to use the return keyword with a lambda WHENEVER you use curly brackets as a wrapper. — The Head Rush, Jul 20 '22 at 18:42
Yes, i missed that one. However, now it's rendering two conditions instead of the one which is true. Any idea why that's happening? — Alaris, Jul 20 '22 at 18:44

score -2 · Answer 1 · answered Jul 20 '22 at 18:37

You're missing a return statement inside of your .map, try adding a return before like.user === appState.user._id like the following:



I'm trying to do conditional rendering on react and although the condition it's either true or false, the elements are not being rendered. What could be the problem? Thanks

    <section>
                                        <li className="top-nav__item top-nav__item--active">
                                            {state.profileData[0].likes.map((like) => {
                                                console.log(like) // outputs the user id and appState.user._id
                                                return like.user === appState.user._id ? (
                                                    <Link
                                                        onClick={(e) => startLikingTweet(e, tweetPost)}
                                                        to="/"
                                                        className="top-nav__link"
                                                    >
                                                        <IcomoonReact
                                                            className="top-nav__icon"
                                                            iconSet={iconSet}
                                                            color="red"
                                                            size={20}
                                                            icon="heart"
                                                        />
                                                        <span>{tweetPost.likes.length}</span>
                                                    </Link>
                                                ) : (
                                                    <a>hey</a>
                                                );
                                            })}
                                        </li>
                                    </section>

conditional statements in a .map function returns nothing in React

1 Answers1