API-

How to show Fakestore API data in getBootstrap card component using react js

May 18, 2021

 Fetch Data from the FakeStore API

Use fetch or axios to get data from the FakeStore API. Here's an example using the useEffect and useState hooks.

Explanation

  1. State and Fetching Data:

    • useState initializes an empty array for products.
    • useEffect fetches data from the FakeStore API when the component mounts and updates the state.

  2. Bootstrap Grid System:

    • Use row and col-md-4 for a responsive grid layout.

  3. Bootstrap Cards:

    • Each product is displayed inside a card with an image, title, description, and price.
    • The description is truncated for brevity.

  4. Styling:

    • The image style ensures proper scaling within the card.
    • Cards are responsive and look good on all screen sizes.

import React, { useState, useEffect } from "react";

const App = () => {
  const [products, setProducts] = useState([]);

  // Fetch data from FakeStore API
  useEffect(() => {
    fetch("https://fakestoreapi.com/products")
      .then((response) => response.json())
      .then((data) => setProducts(data))
      .catch((error) => console.error("Error fetching data:", error));
  }, []);

  return (
    <div className="container mt-5">
      <h1 className="text-center mb-4">FakeStore Products</h1>
      <div className="row">
        {products.map((product) => (
          <div className="col-md-4 mb-4" key={product.id}>
            <div className="card h-100">
              <img
                src={product.image}
                className="card-img-top"
                alt={product.title}
                style={{ height: "200px", objectFit: "contain" }}
              />
              <div className="card-body">
                <h5 className="card-title">{product.title}</h5>
                <p className="card-text">
                  {product.description.slice(0, 100)}...
                </p>
                <p className="card-text fw-bold">${product.price}</p>
              </div>
              <div className="card-footer text-center">
                <button className="btn btn-primary">Buy Now</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;

Run the App

Start the app with npm start. You should see a grid of Bootstrap cards displaying products from the FakeStore API.