Разделить элементы в массиве и добавить разрыв строки, а затем объединить - Javascript

Question

Я сопоставляю данные в ReactionJS.Этот JSX:

{place.venue.location.formattedAddress}

сопоставляет этот запрос данных axios, особенно этот массив в моем ответе:

formattedAddress: Array(5)
0 : "Chester Rd"
1 : "London"
2 : "Greater London"
3 : "NW1 4NR"
4 : "United Kingdom"

AsВ результате, когда я сопоставляю, он возвращает данные в одном предложении, все объединенные вместе.Точно так:

Serpentine RdHyde ParkGreater LondonW2 2TP

Я пытаюсь отобразить, разделить и соединить с разрывом строки, но это не работает.Мой адрес перестает появляться полностью.Что я делаю не так?

Вот мой код (я нарезал, чтобы я мог удалить страну с конца адреса).

{place.venue.location.formattedAddress.slice(0,4).split(',').join('<br />')}

Answer 1

class App extends React.Component{
  render(){
    var arr = ["hello", "there", "world"]
    return(
      <div>
        {arr.map(s=><React.Fragment>{s}<br/></React.Fragment>)}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("app"))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

1 Вы вызываете split для массива, но это строковый метод.

2 Вы не можете использовать соединение, используя '<br />',jsx будет обрабатывать его как строку.

Вы должны отобразить элементы массива и вернуть массив jsx.

{place.venue.location.formattedAddress.slice(0,4).map(s=><React.Fragment>s <br/></React.Fragment>)}