В чем разница между написанием и открытием и закрытием компонента React в разных строках?

Question

Когда я создавал выпадающий Multiselect с помощью Material-ui, я застрял в чем-то странномЕсли я предоставлю элемент списка выбора следующим образом:

let rows = this.props.masterList.map(item => (
  <MenuItem key={item.key} value={item.key}> {item.value} </MenuItem>
))

Он показывает элемент props.children в виде массива из 3 элементов

Вывод идет сзапятые после текста:

Если я напишу тот же код с новыми строками, как это:

let rows = this.props.masterList.map(item => (
  <MenuItem key={item.key} value={item.key}> 
    {item.value} 
  </MenuItem>
))

Он показывает элемент props.children как одинзначение

В этом случае вывод идет правильно:

Может кто-нибудь показать мне разницу между этими двумя?

Спасибо

Answer 1

Удалите лишний пробел до и после {item.value} это будет работать.