Here is a simple array that I need help rendering into a grid structure.
Currently, the array is displayed like this:
HAMDDN
I want each element to be on a new row like so:
HA
MD
DN
Any suggestions on how to achieve this? Below is the full code. I am new to this, so any help is appreciated!
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/>
);
}