Display a series of elements in rows using styled-components

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/>
  );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come I am receiving a null value for isMatch from bcrypt compare even though the two password strings match exactly?

Currently, I am attempting to authenticate a user based on a password. My approach involves using bcrypt compare to check if the user's requested password matches one stored in a MongoDB database. Despite the passwords being identical, I keep receivin ...

What's the best way to include php variables in this Javascript code?

I'm currently in the process of constructing a straightforward news page that utilizes ajax filters based on the user's selected category. The javascript code below establishes a connection with a php file and generates HTML using data from a mys ...

The mysterious behavior of HTML 5 causing images to mysteriously add a 3px margin at the

Whenever I update my website to <!DOCTYPE HTML> Each img element enclosed within a DIV mysteriously acquires a 3px bottom margin, even though no CSS rule defines it. To clarify, there are no style attributes responsible for this 3px bottom margin. & ...

Navigating string primitives when using AngularJS and $http: Tips and Tricks

A function in ASP.NET Web Api is returning a simple string as JSON data. However, when calling this function from AngularJS, the returned value is surrounded by quotes instead of being a plain string: return $http.post('/api/orders', data).then ...

Ways to retrieve content from a website

After conducting thorough research on this matter, I stumbled upon an answer here. Despite following the provided solution, the process is still not functioning as expected. My goal is simple - to extract text from a webpage like Google and convert it into ...

Tips for Emphasizing a Row in a Table Using a Specific Value

Currently, I am engaged in creating an educational YouTube tutorial that delves into Google App Script and Google Sheets. I have been attempting various methods to highlight a row containing the word "ABSENT", but all my endeavors have proven to be unsucc ...

Calculate the worth of a specific item within an array of objects and save the outcome as a new attribute

I am attempting to calculate the value in each element and then create a new element called "Count". Rule: Count the quantity if the next element has the same "Quantity" value, then add the total to a new element named "Count". I have tried implementing th ...

What kinds of font file formats are you utilizing?

In numerous projects, I have observed a common practice of using multiple font extensions such as .TTF, .WOFF, and .WOFF2. However, this can result in having multiple files for a single source. Imagine the clutter if one has several sources with different ...

Using Conditions in a Javascript For Loop

I would like to utilize a for loop to achieve the following task. Within an array, I have a predefined set of values representing hex colors for a chart. My goal is to extract a specified number of those values using the loop with two options. If the ...

Accessing a single element from a nested object in Handlebars.js

Recently, I have been working on a nodejs application that utilizes handlebars js as its view engine. My main challenge at the moment is accessing one specific element from a nested object that I am passing to the hbs view. router.get('/view_users/:i ...

Laravel Mix causes errors when running `npm run dev` and breaks the package

My nodejs package is built using ES6 features such as 'let', the spread operator (...) and default values for function arguments. However, when I run npm run production with Laravel Mix, an error message appears: ERROR Failed to compile with ...

Unable to upload code onto GitHub due to the excessive size of node modules

I recently restructured my react project, separating the front-end code into a client directory while keeping the back-end code in the root directory. However, I encountered an issue when trying to push my code to GitHub. An error message indicated that th ...

Unlock the power of viewing numerous inputs simultaneously

Seeking guidance on how to allow users to preview images before uploading them. Currently, my code successfully previews images for one input field, but I am facing challenges when trying to add multiple pairs of inputs and images. How can I implement mul ...

Tips for stopping html form from refreshing upon submission

Hello, despite extensive searching and testing, I am still unable to locate the issue and therefore I am reaching out to seek your assistance in resolving my problem. Within a form that I have created, upon clicking the submit button, a javascript functio ...

Can someone clarify the distinction between returning a value directly or using Promise.resolve within the then() function?

What is the distinction between: new Promise(function(res, rej) { res("first example"); }) .then(function(result) { return "bbb"; // directly returning string }) .then(function(result) { console.log(result); }); and this: n ...

Trouble encountered while developing a unique Mui v5 component with custom properties

I am currently working on creating a styled component using the styled function from Material-UI // Importing necessary modules import styled from '@mui/system/styled'; import Select, { SelectChangeEvent, SelectProps } from '@mui/mater ...

Issue with React ChartJS rendering – Title not visibleWhen using React Chart

I'm currently using react chart js for displaying a doughnut in my component. "chart.js": "^3.7.1", "react-chartjs-2": "^4.1.0", However, I'm facing an issue where the title is not being displayed: const d ...

Autocomplete field in MUI gets reset after form submission

Currently, I am developing a React application with react-hook-form and @mui/material. My form consists of an Autocomplete component for selecting multiple values. However, I am encountering an issue where the value of the Autocomplete field resets to its ...

Steps to handle the change event of a p:inputText element

In my current setup, I am utilizing p:inputText and have the need to trigger a javascript function that will update the searchField in the backend bean. <p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" ...

Tips for incorporating a svg file into your React project

I am facing an issue with my custom React, Typescript, and Webpack project. I am trying to import a basic .svg file and utilize it in one of my components. However, Typescript is throwing the following error: Cannot find module I have tried installing s ...