React no-unused-expressions

Question

I have a simple React shoppinglist component

I'm getting an error

Expected an assignment or function call and instead saw an expression  no-unused-expressions

from this line

<li key={id}>

Whats causing this error.

import React, {Component} from 'react';
import uuid from 'uuid';

class ShoppingList extends Component{

  state = {
    items:[
      { id: uuid(), name: 'Eggs'},
      { id: uuid(), name: 'Water'},
      { id: uuid(), name: 'Steak'},
      { id: uuid(), name: 'Milk'}
    ]
  }

  render(){

    const {items} = this.state;

    return(
      <div>
        <button>
          Add Item
        </button>  


        <ul>
          {items.map(({id, name}) => {
            <li key={id}>
              {name}
            </li>  
          })}
        </ul>

      </div>    
    );
  }
}

export default ShoppingList

Answer 1

You missed return with <li key={id}>...</li> . It should be as:

<ul>
  {items.map(({ id, name }) => {
    // see the return
    return <li key={id}>{name}</li>;
  })}
</ul>

As it is a single line expression just the li . You could write that as:

<ul>
  {items.map(({ id, name }) => (
    <li key={id}>{name}</li>
  ))}
</ul>

Now here the return is implicit, no need to write it.