I am trying to fetch data from .json file but its not showing anything

Question

I am trying to pull title and price from .json file but its showing me nothing not even an error. I will really appreciate if you can see what I am doing wrong here are the codes. Maybe I am not mapping it correctly or importing it correctly

ForYou.js:-

import React, {useEffect, useState} from 'react'
import './ForYou.css'
import ForYouItem from './ForYouItem'
import Products from './Products.json'

export default function ForYou(props) {
    return (
        <div>
            <div className="ForYou-container">
                <div className="heading">
                    <a href="#" className='Big-text'> {props.Bigheading}</a>
                </div>
                {Products.map(product => {
                <div className="Products">
                    <ForYouItem Title={product.title} Price={product.price}/>
                </div>})}
            </div>
        </div>

    )
}

ForYouitem.js;-

import React from 'react'
import ad1 from './ad1.jpg'
export default function ForYouItem(props) {
  return (
    <div>
        <a href="#">
                    <div class="card" >
                        <img src="{ad1}" class="card-img-top" alt="..."/>
                            <div class="card-body">
                                <h5 class="card-title"> {props.Title} </h5>
                                <p class="card-text">Rs.{props.Price}</p>
                                <a href="#" class="d-flex justify-content-center btn btn-danger">Buy Now!</a>
                            </div>
                    </div>
                    </a>
    </div>
  )
}

Products.json:-

[
    {
        "id": 1,
        "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
        "price": 109.95,
        "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
        "category": "men's clothing",
        "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
        "rating": {
            "rate": 3.9,
            "count": 120
        }
    },
    {
        "id": 2,
        "title": "Mens Casual Premium Slim Fit T-Shirts ",
        "price": 22.3,
        "description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.",
        "category": "men's clothing",
        "image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
        "rating": {
            "rate": 4.1,
            "count": 259
        }
    }]

`{Products.map(product => {` doesn't return anything because you forgot the `return` keyword. `.map()` returns a value for every element in the array. You aren't returning anything so it's making an array of empty values. — Andy Ray, Sep 09 '22 at 05:18

score 1 · Accepted Answer · answered Sep 09 '22 at 05:22

Try this it might works!, You forgot to return.

export default function ForYou(props) {
  return (
    <div>
      <div className="ForYou-container">
          <div className="heading">
              <a href="#" className='Big-text'> {props.Bigheading}</a>
          </div>
          {Products.map(product => (
            <div className="Products">
              <ForYouItem Title={product.title} Price={product.price}/>
            </div>
          ))}
      </div>
    </div>
  )
}

score 1 · Answer 2 · answered Sep 09 '22 at 05:33

You forget to return also the unique key

import React, { useEffect, useState } from 'react';
import './ForYou.css';
import ForYouItem from './ForYouItem';
import Products from './Products.json';

export default function ForYou(props) {
    return (
        <div>
            <div className="ForYou-container">
                <div className="heading">
                    <a href="#" className="Big-text">
                        {props.Bigheading}
                    </a>
                </div>
                {Products.map((product) => (
                    <div className="Products" key={product.id}>
                        <ForYouItem Title={product.title} Price={product.price} />
                    </div>
                ))}
            </div>
        </div>
    );
}

Try above codes.

score 1 · Answer 3 · answered Sep 09 '22 at 05:38

While mapping Products you should return productItem. you should use "()" instead of "{}"

you should use like

{Products.map(product => (
  <div className="Products">
    <ForYouItem Title={product.title} Price={product.price}/>
  </div>
))}

instead of

{Products.map(product => {
  <div className="Products">
    <ForYouItem Title={product.title} Price={product.price}/>
  </div>
})}

R. Mahbub · Answer 4 · 2022-09-09T06:51:18.133

Maybe JSON data is not kept in a variable. Try this please, hope it would work.

[
    {
        "id": 1,
        "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
        "price": 109.95,
        "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
        "category": "men's clothing",
        "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
        "rating": {
            "rate": 3.9,
            "count": 120
        }
    },
    {
        "id": 2,
        "title": "Mens Casual Premium Slim Fit T-Shirts ",
        "price": 22.3,
        "description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.",
        "category": "men's clothing",
        "image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
        "rating": {
            "rate": 4.1,
            "count": 259
        }
    }]

In the parent component:
import { useState,useEffect } from 'react';
import Product from '../Product/Product[Your file path]';

 const [products, setProducts] = useState([]);
    useEffect(() => {
            fetch('/products.JSON')
            .then(res => res.json())
            .then(data => {
                setProducts(data);
              
    }),[]);
 <div className="card-deck mt-5">
   {products.map(product => <ForYouItem 
         product={product} 
         key={product.id}
  />)}
 </div>

In child component:

const ForYouItem = ({title, description,.... }) => {
    return (
        <div className="card shadow-sm">
         <div className="card-body">
           <h5>{title}</h5>
             <p className="card-text text-secondary mt-4">{description</p>
         </div>
        </div>
    );
};

export default ForYouItem;

I am trying to fetch data from .json file but its not showing anything

4 Answers4