Looking to showcase information in a list format using CSS?

This is how the data appears when it's rendered:

https://i.sstatic.net/M0m2u.png

In the above display, you can observe that the data is shown next to each other. I am curious if it is possible to use CSS to present the text in a list format?

Below is my query from Contentful:

query MyQuery {
  allContentful {
    edges {
      node {
        feelings
      }
    }
  }
}

OUTPUT:

{
  "data": {
    "allContentful": {
      "edges": [
        {
          "node": {
            "feelings": [
              "Happy / Good Mood",
              "Creative",
              "Sleepy / Couch Lock"
            ]
          }
        },

And this is what is returned:

const StrainTemplate = ({
    data: {
        strain: {
            feelings,
        },
    },

<p className="info-text"{feelings}</p>
cssreactjscontentful

Answer №1

If the presentation resembles your images, you have the option to utilize white-space: pre; in order to incorporate the whitespace

.info-text {
  white-space: pre;
}
<p class='info-text'>
  Happy / Good Mood
  Creative
  Sleepy / Couchy Look
</p>

Note: this method will be effective if there is a whitespace present in your displayed content and it adheres to it by utilizing [Tab Space] or [New Line], however, if your displayed content solely consists of [Space], it will remain on the same line

Answer №2

Instead of using CSS, why not transform it into individual li elements?

feeling.map(eachWord => <li>{eachWord}</li>)

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

Design a Label or Tab with Pure CSS

Is it possible to achieve a tab or label-like look using only CSS, without the need for images? This is what I am aiming for: While I can create one end, I am struggling to create the triangle point. Can this be accomplished solely with CSS? ...

css

What is the best way to include fixed text before a value?

Hey there, I'm working on a project where the output value changes based on the selection made. I'd like to display the text "Total €" in front of the value like this: . However, the current output looks like this: . Additionally, I want t ...

jqueryhtmlcss

The createContext function mistakenly used the default value instead of the value that was supposed to

When I import and use a context that allows child components to setTheme, the useContext hook returns the default value instead of the passed value. What could be causing this issue and how can I resolve it? I apologize for any poor English in my explana ...

reactjsnext.jsreact-contextcreatecontext

Crystal-clear TextField component in Office UI Fabric

Seeking advice on how to clear a masked text field from Office UI Fabric using a button. Does anyone have a solution for this? I attempted to set the value using a state, but unfortunately, it did not work as expected. ...

reactjstypescripttextfieldoffice-ui-fabric

Using Multiple CSS Loaders in Webpack

I'm currently facing an issue with loading bootstrap CSS for use within my webpack application. The problem arises from the fact that I have a CSS loader in place with localIndentName for component-specific CSS to prevent naming conflicts with other c ...

reactjswebpack

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

htmlcssflexbox

Unusual Actions: Removing a specific item from an array using ReactJS

In my current approach, I am utilizing a technique to remove an object from an array stored in the state: export default function App() { const [gridData, setGridData] = useState({field1:"Placeholder",data:[]}); const data = [ { numstart: 1,numend ...

javascriptreactjs

Tips for showcasing a Bootstrap alert

I'm attempting to integrate Bootstrap Alerts into my project, but I'm struggling to display them programmatically. Here is the HTML snippet: <div class="alert alert-success alert-dismissible fade show" role="alert" id="accepted-meal-al ...

javascriptjquerycsstwitter-bootstrap

Updating device information in real-time using React Native

Currently, I am utilizing react-native-device-info to access the DeviceLocale or DeviceCountry. However, I am wondering if there is a method to update Device-info without requiring a complete restart of the app. For instance, when my device language is se ...

javascriptreactjsreact-native

Displaying or concealing fields through Javascript depending on the category type of the results item

I am facing an issue with displaying certain fields in each individual property search result based on the property type. For example, if a property is classified as Land, I do not want the bedrooms and bathrooms fields to be visible, but if it is a Villa, ...

javascriptjqueryhtmlcss

Picture not appearing on the webpage due to a connection issue with the sqlite database

I am working on creating a user profile feature where users can upload their profile picture. The uploaded picture is saved in local storage within a specific directory, and the URL of this image is then stored in the database linked to the connected user. ...

javascriptreactjsnode.js

Slick.js integrated with 3D flip is automatically flipping after the initial rotation

I'm encountering an issue with my CSS3 carousel and 3D flipping. Whenever I navigate through the carousel and flip to the next slide, the first slide seems to automatically flip/flop after completing the rotation. You can see a visual demonstration o ...

javascriptjqueryhtmlcss

CSS techniques for aligning content

I am currently working on designing a website template, and I have encountered an issue with positioning three individual columns that contain blocks of content. My objective is to have the first block of content in each column start at the top of their re ...

htmlcsspositioning

splitting up the lengthy list into manageable chunks according to the screen dimensions

How can I make the blue color row-based list (the divs inside a div with id phrase) break on the next line based on the screen size? Any suggestions on additional changes needed in the following CSS? #phrase { color: #fff; position: ...

htmlcss

I am currently attempting to design a blurred background with text overlay, where the text seems to clear up the blur effect of the background. However, I am facing

Goal: I want to achieve a visually appealing effect by overlaying text on a blurred background image, making it appear as though the text is transparent and revealing the clear background image behind it. Status: I have successfully created a layout with ...

htmlcss

ReactJS has the capability to showcase two components simultaneously

I'm facing an issue with my ReactJS workspace where I have two components but only one is displaying. import React, { Component } from 'react'; import logo, { ReactComponent } from './logo.svg'; import './App.css'; impor ...

javascriptreactjs

Retrieving state from a child functional component in React

Exploring the world of React and navigating functional components. In my project, I have a parent component and a child component. The challenge I am facing is accessing the child's state from the parent only when a specific button in the parent comp ...

reactjs

Bug in React caused by precomputed chunk calculations

Currently, I am working with react version 18.2.0, next.js version 14.1, and express version 20.11.1. However, I have been encountering a warning sporadically on my server component as described in this thread https://github.com/vercel/next.js/issues/50602 ...

reactjsnext.jsreact-server-components

Is it possible to incorporate a NodeJS library into my React project?

I'm currently working on a project with React Typescript. My goal is to update a fillable PDF using array values upon form submission in my react form. During my research, I came across this library: https://www.npmjs.com/package/pdffiller I'm ...

javascriptnode.jsreactjstypescript

What is the correct way to establish default values when working with redux-forms?

When utilizing React with redux-forms, I encountered an issue with the following component - a form that populates 3 input fields with values from the query string. To initialize the fields, I used the initialize method: initialize({ firstname: query.f ...

reactjsredux-form