Ways to List all the values of Short Text List on Contentful Using GatsbyJs

Question

I have a blog with 2 categories using Contentful Short Text List but when I display them on my site using Gatsby the 2 Categories seems to stack beside each other just like the above. They should be Dropshipping Tips Product Selection instead of Dropshipping Tipsproduct Selection.

Here is the Contentful Field

Is there a way to fix this? I'm using Gatsby as SSG.

Answer 1

Contentful DevRel here.

Unfortunately, I can not give you detailed advice here. Contentful provides you with ways to define and structure your content. It's then up to you how to use it and build things/websites/products with it.

Gatsby fetches the pure data during its build process and builds a website. For this case, a Gatsby template renders the tag list on a page. This is probably where the issue lies. I'd check two things first:

• is the template rendering a proper tag list (in HTML ul > li)
• is there maybe a CSS fix (add some margin/padding to the list items)

I hope that helps, good luck!

Answer 2

This seems like more of a html, css, react problem than anything to do with contentful or gatsby.

Here is how you could make a tags component.

// App.js

import React from "react";
import Tags from "./Tags";
import "./styles.css";

const tagsArray = [
  { title: "dropshipping tips" },
  { title: "product selection" },
  { title: "other tag 1" },
  { title: "other tag 2" }
];

export default function App() {
  return (
    <>
      <h1>My article</h1>
      <Tags data={tagsArray} />
    </>
  );
}

---

// Tags.js

import React from "react";

export default function Tags({ data }) {
  return (
    <ul className="tags">
      {data.map((tag, index) => (
        <li key={index} className="tag">
          {titleCase(tag.title)}
        </li>
      ))}
    </ul>
  );
}

function titleCase(str) {
  return str
    .split(" ")
    .map(
      ([firstChar, ...rest]) =>
        firstChar.toUpperCase() + rest.join("").toLowerCase()
    )
    .join(" ");
}

---

/*  styles.css */

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.tag {
  margin: 0 0.5em 0.5em 0;
  padding: 0.7em;
  background: LemonChiffon;
  border-radius: 0.2em;
  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3);
}

titleCase helper taken from this answer