ReactJS error: “Expected an assignment or function call and instead saw an expression”

Question

I have below Menu Component which i am trying to refactor inside the below Map function

I want to render add the tag <i class="fa fa-fw fa-user"></i> when m.menuLabel is equal to "Login" but I am getting below error

"Expected an assignment or function call and instead saw an expression"

import React from 'react';
import { Link } from 'react-router-dom';

const MENUDATA = [
    { menuLink: "/", menuLabel: "Home" },
    { menuLink: "/products", menuLabel: "Products" },
    { menuLink: "/test", menuLabel: "404" },
    { menuLink: "/login", menuLabel: "Login" }
];

function Menu(props) {
    return (
        <nav class="navbar bg-faded">
            <div class="container">
                <ul class="navbar-nav mr-auto">

                    {MENUDATA.map(m => {

                        if (m.menuLabel == "Login") {
                            <li class="nav-item active" key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    <i class="fa fa-fw fa-user"></i>
                                    {m.menuLabel}
                                </Link>
                            </li>
                        }
                        else {
                            <li class="nav-item active" key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    {m.menuLabel}
                                </Link>
                            </li>
                        }

                    })}
                </ul>
            </div>
        </nav>
    );
}

export default Menu;

Answer 1

you forgot to return value from map

<ul class="navbar-nav mr-auto">
   {MENUDATA.map(m => {

        if (m.menuLabel == "Login") {
            return <li class="nav-item active" key={m.menuLabel}>
                <Link class="nav-link" to={m.menuLink}>
                    <i class="fa fa-fw fa-user"></i>
                    {m.menuLabel}
                </Link>
            </li>
        }
        else {
            return <li class="nav-item active" key={m.menuLabel}>
                <Link class="nav-link" to={m.menuLink}>
                    {m.menuLabel}
                </Link>
            </li>
        }

    })}
</ul>

Answer 2

you should return a jsx element with map method :

import React from 'react';
import { Link } from 'react-router-dom';

const MENUDATA = [
    { menuLink: "/", menuLabel: "Home" },
    { menuLink: "/products", menuLabel: "Products" },
    { menuLink: "/test", menuLabel: "404" },
    { menuLink: "/login", menuLabel: "Login" }
];

function Menu(props) {
    return (
        <nav class="navbar bg-faded">
            <div class="container">
                <ul class="navbar-nav mr-auto">

                    {MENUDATA.map(m => {

                        return(m.menuLabel == "Login"?(<li class="nav-item active" 
                                 key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    <i class="fa fa-fw fa-user"></i>
                                    {m.menuLabel}
                                </Link>
                            </li>)

                         :(<li class="nav-item active" key={m.menuLabel}>
                                <Link class="nav-link" to={m.menuLink}>
                                    {m.menuLabel}
                                </Link>
                            </li>))
                        }

                    )}
                </ul>
            </div>
        </nav>
    );
}

export default Menu;