遍历数组并为每个项目返回一个`Dropdown.Item`元素

Question

I am trying to loop through the todos array using the JavaScript map() function. I want to return a Dropdown.Item element for each item. When I click the Dropdown.Toggle , an empty list expands. Dropdown.Item and Dropdown.Toggle are react bootstrap components.

Code here: https://stackblitz.com/edit/react-egxxcl

class App extends Component {
  constructor() {
    super();
    this.state = {
      todos: [{name: 'A', value: 10}, {name: 'B', value:20}]
    };
  }

  render() {
    return (
      <div>
       <Dropdown>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Change
        </Dropdown.Toggle>

        <Dropdown.Menu >
          {this.state.todos.map((todo, index) => {
            <Dropdown.Item value={todo.value}>{todo.name}</Dropdown.Item>
          })}
        </Dropdown.Menu>
      </Dropdown>
      </div>
    );
  }
}

Answer 1

You don't return anything from the map function, you can wrap it in parentheses or without to avoid using the return keyword, also don't forget the key prop.

I highly recommend using a linter to help you catch those small errors

You can also destructure value and name from the map callback function using ({})

({ propName })

<Dropdown.Menu>
  {this.state.todos.map(({ name, value }) => (
    <Dropdown.Item key={name} value={value}>{name}</Dropdown.Item>
  ))}
</Dropdown.Menu>

Answer 2

You just missed to return from map function.

{this.state.todos.map((todo, index) => {
     return <Dropdown.Item value={todo.value}>{todo.name}</Dropdown.Item>
})}

or shorten,

{this.state.todos.map((todo, index) => (
   <Dropdown.Item value={todo.value}>{todo.name}</Dropdown.Item>
))}

or even shorten,

{this.state.todos.map((todo, index) => <Dropdown.Item value={todo.value}>{todo.name}</Dropdown.Item>
)}