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;

Displays this:

Failed to compile

./src/components/navbar/navbar.js Line 9: no-unused-expressions

Find out more about each error. This error occurred during the build time and cannot be dismissed.

  • one
    Remove braces. One more time to study the syntax of the switch functions - Alexey Ten

2 answers 2

Try to replace

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

on

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

Those. replace braces with round brackets. Or even remove the curly braces. Like more.

In this case, the callback from the map will begin to return a value and this will correct the error.

    The answer is already there, but you can offer another option with a little explanation. As already said, the error is in the following code:

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

    In order to bring a little clarity, I decided to shed light on the expression of the switch function. Namely, when you write curly brackets {} after the arrow => then you tell JS code that inside the curly brackets there will be a function body, from which you must return a value if necessary.

    The body of an arrow function can have a short ( concise body ) or block ( block body ) form. The block form does not return a value; you must explicitly return a value.

    That is, you can simply add return :

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

    Or replace the curly brackets {} with parentheses () and you will get a shorter notation.

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

    Additional useful information on switch functions

    If the only operator in the expression of the arrow function is return , you can remove return and the surrounding curly braces:

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

    Parentheses are optional for a single parameter:

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

    The function without parameters needs parentheses:

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

    Enclose the body of the object in parentheses to return the literal expression of the object:

     params => ({ foo: bar })

    Do not forget that the returned object strings use the abbreviated syntax {} - will not work as expected. Because the code in brackets {} recognized as a chain of expressions, for example:

     () => { foo: 1 };

    Here foo interpreted as a name, not as a key in the object string. Do not forget to wrap object lines in parentheses. Otherwise, errors and side effects may occur.

    Useful study link: Arrow functions