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  >
                        <img src="{ad1}"  alt="..."/>
                            <div >
                                <h5 > {props.Title} </h5>
                                <p >Rs.{props.Price}</p>
                                <a href="#" >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
        }
    }]

CodePudding user response：

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>
  )
}

CodePudding user response：

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.

CodePudding user response：

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>
})}