fetchData

import { useEffect, useState } from "react";
import Product from "./Product";

function AllProducts() {
  const [posts, setPosts] = useState([]);

  const fetchData = async () => {
    await fetch("https://dummyjson.com/products")
      .then((res) => res.json())
      .then((data) => {
        console.log(data.products);
        setPosts(data.products);
      });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {posts.length ? <Product posts={posts} /> : "جاري التحميل"}
    </div>
  );
}

export default AllProducts;

import { useEffect, useState } from "react";
import Product from "./Product";

function AllProducts() {
  const [posts, setPosts] = useState([]);

  const fetchData = async () => {
    await fetch("https://dummyjson.com/products")
      .then((res) => res.json())
      .then((data) => {
        console.log(data.products);
        setPosts(data.products);
      });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {posts.length ? <Product posts={posts} /> : "جاري التحميل"}
    </div>
  );
}

export default AllProducts;

الشرح المبسّط

• useState([]): نجهّز حالة اسمها posts (مصفوفة) علشان نخزّن فيها المنتجات.
• fetchData: دالة بتجيب البيانات من الرابط:
  • fetch(...) → يطلب البيانات.
  • .then(res => res.json()) → يحوّل الردّ إلى JSON.
  • .then(data => setPosts(data.products)) → نحفظ مصفوفة المنتجات داخل posts.
• useEffect(() => { fetchData(); }, []): نستدعي fetchData مرة واحدة بعد أول رندر (عشان [] فاضية).
• في الـ return:
  • لو posts.length أكبر من صفر → نعرض كومبوننت Product ونعطيه posts كـ prop.
  • لو لسه فاضي → نعرض نص بسيط: “جاري التحميل”.

ملاحظة: داخل Product تأكد تستقبل الـ prop كذا:

function Product({ posts }) { /* ... */ }

function Product({ posts }) { /* ... */ }

وعند عرض العناصر استخدم key مثل product.id داخل الـ map.