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

you forgot the return in map callback function, that's why getting the error. write it like this: `{arr.map((e) => (

score 1 · Accepted Answer · answered Apr 09 '19 at 05:13

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>
  );
}

score 1 · Answer 2 · answered Apr 09 '19 at 05:15

1

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>
);

answered Apr 09 '19 at 05:15

ruggierom

99
5

Good point, thanks for the feedback. – FuzzyTemper Apr 09 '19 at 06:11

React map over array to create list

2 Answers2