Рендеринг массива в строки с помощью styled-component

Question

У меня есть простой массив, который я пытаюсь отобразить в сетке.

Этот код ниже отображает массив следующим образом:

HAMDDN

Я хочу отобразить его так, чтобы следующее привело к другой строке

HA
MD
DN

Какие-нибудь мысли? Полный код ниже. Я знаю, что это простая задача, но я новичок ie. Спасибо!

import React from 'react';
import styled from 'styled-components';
import Page from '../Shared/Page'

export const StateGrid = styled.div`
         display:inline-block;
       `;

const list =[
    "HA", "MD", "DN"
]

function States () {
     return (
       <Page name="statistics">
           <StateGrid>{list}</StateGrid>
       </Page>
     );
}

export default function() {
  return (
    <States/>
  );
}

Answer 1

Использование map ()

Метод map () создает новый массив, заполненный результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

<StateGrid>
  {list.map(item => (
    <div>{item}</div>
  ))}
</StateGrid>