Не работает функция в reactJS

import React from 'react';
import classes from './navbar.module.css';
import {NavLink} from 'react-router-dom';
const Navbar = (props) => {
    let friendElem = props.state.friends;
    let i = 0;
    console.log(friendElem[i].name);
    let friendList = friendElem.map((friendElem,i) => {<li><div></div><span>{friendElem[i].name}</span></li>});
    return (
    <nav className={classes.nav}>
        <ul>
            <li>
                <div className={classes.home}></div>
                <NavLink to="/profile" className={classes.item} activeClassName={classes.activeLink} >Profile</NavLink>
            </li>
            <li>
                <div className={classes.dialogs}></div>
                <NavLink to="/dialogs" className={classes.item} activeClassName={classes.activeLink} >Dialogs</NavLink>
            </li>
            <li>
                <div className={classes.news}></div>
                <NavLink to="/news" className={classes.item} activeClassName={classes.activeLink} >News</NavLink>
            </li>
            <li>
                <div className={classes.music}></div>
                <NavLink to="/music" className={classes.item} activeClassName={classes.activeLink} >Music</NavLink>
            </li>
            <li>
                <div className={classes.settings}></div>
                <NavLink to="/settings" className={classes.item} activeClassName={classes.activeLink} >Settings</NavLink>
            </li>
        </ul>
        <div className={classes.friends}>
            <h1>Friends</h1>
            <ul className={classes.friendList}>
                {friendList}
            </ul>
        </div>
    </nav>);
};
    export default Navbar;

Попробуйте заменить

let friendList = friendElem.map((friendElem,i) => {<li><div></div><span>{friendElem[i].name}</span></li>});

на

let friendList = friendElem.map((friendElem,i) => (<li><div></div><span>{friendElem[i].name}</span></li>));

Т.е. заменить фигурные скобки на круглые. Или вообще убрать фигурные скобки. Как больше нравится.

В таком случае колбэк из map начнёт возвращать значение и это исправит ошибку.

Ответ уже имеется, но можно предложить еще один вариант с небольшим пояснением. Как уже сказали, ошибка в следующем коде:

let friendList = friendElem.map(
  (friendElem, i) => {<li><div></div><span>{friendElem[i].name}</span></li>}
);

Дабы внести небольшую ясность, решил пролить свет на выражение стрелочной функции. А именно, когда вы пишете фигурные скобки {} после стрелки => то Вы говорите JS коду, что внутри фигурных скобок будет находиться тело функции, из которого вы должны вернуть значение в случае необходимости.

Тело стрелочной функции может иметь краткую (concise body) или блочную (block body) форму. Блочная форма не возвращает значение, необходимо явно вернуть значение.

То есть, можно просто дописать return:

let friendList = friendElem.map(
  (friendElem, i) => { return <li><div></div><span>{friendElem[i].name}</span></li>}
);

Либо заменить фигурные скобки {} на круглые скобки () и получится более короткая форма записи.

let friendList = friendElem.map(
  (friendElem, i) => (<li><div></div><span>{friendElem[i].name}</span></li>)
);

Дополнительная полезная информация по стрелочным функциям

Если единственным оператором в выражении стрелочной функции является return, можно удалить return и окружающие фигурные скобки:

elements.map(element => element.example);

Круглые скобки не обязательны для единственного параметра:

(singleParam) => { statements }
singleParam => { statements }

Функция без параметров нуждается в круглых скобках:

() => { return expression; } // () => expression 

Заключите тело объекта в круглые скобки, чтобы вернуть литеральное выражение объекта:

params => ({ foo: bar })

Не забывайте о том, что возвращаемые объектные строки используют сокращённый синтаксис {} - будут работать не так, как ожидается. Потому что код в скобках {} распознаётся как цепочка выражений, для примера:

() => { foo: 1 };  

Здесь foo трактуется как наименование, а не как ключ в объектной строке. Не забывайте оборачивать круглыми скобками объектные строки. В противном случае могут возникать ошибки и сайд эффекты.

Полезная ссылка для изучения: Стрелочные функции