React map over array to create list

Question

I am trying to map over a really simple array in react, but always receiving

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

this is the code

render() {
  const arr = [1, 2, 3, 4, 5];
  return (
    <div>
      <ul>
        <li>{this.state.amount}</li>
        {arr.map((e) => {
          <li key={e}>
            {e}
          </li>
        })}
      </ul>
    </div>
  );
}

For me everything looks like in all the tutorials and examples like https://reactjs.org/docs/lists-and-keys.html

Answer 1

Return statement is missing in map :

render() {
  const arr = [1, 2, 3, 4, 5];
  return (
    <div>
      <ul>
        <li>{this.state.amount}</li>
        {arr.map((e) => {
          return <li key={e}>
            {e}
          </li>
        })}
      </ul>
    </div>
  );
}

Answer 2

I think it's easier to keep track of things if map() is called in render.

render(){
const arr = [1, 2, 3, 4, 5];
let listItem = arr.map(each =>{
    return( 
    <li key = {e}>
        {e}
    </li>)
})
return (
  <div>
    <ul>
      <li>{this.state.amount}</li>
        {listItem} 
    </ul>
  </div>
);