Rendering JSON Data into React Components

Hi there,

Assumption 1: Let's imagine we have an e-commerce website (not a large-scale one), and we need to render the products' data in different components. What's one of the easy ways to go about it? (PS: It's a React.js app)

Answer: Create a ".json" file!

Assumption 2: Okay, I assume you have created a react app via Create React App or any other preferred method.

Now we have our sample.json file. The next step is to input the data we want to use. This can be in different formats. Check out examples here. Below is a sample:

[
  {
    "id": 1,
    "name": "Coconut Oil Bath Bomb",
    "href": "/products/:id",
    "price": 4800,
    "imageSrc": "https://res.cloudinary.com/dnohok50n/image/upload/v1662980638/scamp-group-project/3_e3bliw.jpg",
    "imageAlt": "Bath Bomb"
  },
 ...,
  {
    "id": 6,
    "name": "Coffee Bath bomb",
    "href": "/products/:id",
    "price": 4500,
    "imageSrc": "https://res.cloudinary.com/dnohok50n/image/upload/v1662980692/scamp-group-project/20_cyvuai.jpg",
    "imageAlt": "Bath Bomb"
  }
]

Ps: For the id in the href, I used useParams to get that.

const params = useParams();

Well, well, well, after inputting the needed data, it's time to map!🥳.

First, we import the Product Items from the JSON file for mapping.

import ProductItems from "../../components/productsFolder/products.json";

And then, we use the map() to render the data in any component we want.

                {ProductItems &&
                ProductItems.map((product) => (
                  <a
                    key={product.id}
                    href={product.href}
                    className="group"
                  >
                    <div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
                      <img
                        src={product.imageSrc}
                        alt={product.imageAlt}
                        className="h-full w-full object-cover object-center group-hover:opacity-75"
                      />
                    </div>
                    <h3 className="mt-4 text-sm text-lightGrey">
                      {product.name}
                    </h3>
                    <p className="mt-1 text-lg font-medium text-lightGold">
                      {product.price}
                    </p>
                  </a>
                ))}

Ps: I made use of Tailwind CSS, hence the multiple class names

The next thing is to check the output in the browser!💃 There, we have the data displayed!

Bonus😅: You can use Cloudinary for the URL part. It helps to have your media files load faster on the browser and without visual degradation.

Bye!👋

Footnote: This is my first tech article. Here's to She Code Africa🙌 for the push!