Render an array to rows with styled-component

Question

I have a simple array here that I am trying to render into a grid.

This code below renders the array as:

HAMDDN

I want to render it such that the following will result in a different row

HA
MD
DN

Any thoughts? The full code is below. I know this is a simple task but I am a newbie. Thanks!

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

Use map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

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