Component Composition in React

We all know the best and easy feature in react to render heavy amount of datas in to the screen using component compositing coding them normally can take upto days if the components are more than 100 and manual labour work here isnt appreciated

so hence what we do in react is we need 3 files minimum for this lets say

1) App . jsx

2) Products.js

3) Product.jsx

Lets just have a look into the React's App.jsx code

import React from 'react';
import Product from './components/product.jsx'; // Make sure the path is correct
import { PRODUCTS } from './product'; // Assuming you've saved your product data in a file named 'products.js'

const App = () => {
  return (
    <div>
      {PRODUCTS.map((product) => (
        <Product key={product.id} data={product} />
      ))}
    </div>
  );
}

export default App;

• we have import basic and required libraries

• we then have created react app component

• where we have mapped i.e looped througout the PRODUCTS object which is JSONs and given is Product another component

import product1 from "./assets/products/1.png";
import product2 from "./assets/products/2.png";
import product3 from "./assets/products/3.png";
import product4 from "./assets/products/4.png";
import product5 from "./assets/products/5.png";
import product6 from "./assets/products/6.webp";
import product7 from "./assets/products/7.webp";
import product8 from "./assets/products/8.webp";

export const PRODUCTS = [
  {
    id: 1,
    productName: "IPhone",
    price: 999.0,
    productImage: product1,
  },
  {
    id: 2,
    productName: "Macbook Pro 2022 (M1)",
    price: 1999.0,
    productImage: product2,
  },
  {
    id: 3,
    productName: "Cannon M50 Camera",
    price: 699.0,
    productImage: product3,
  },
  {
    id: 4,
    productName: "WLS Van Gogh Denim Jacket",
    price: 228.0,
    productImage: product4,
  },
  {
    id: 5,
    productName: "LED Light Strips",
    price: 19.99,
    productImage: product5,
  },
  {
    id: 6,
    productName: "SPECTRUM LS TEE",
    price: 68.0,
    productImage: product6,
  },
  {
    id: 7,
    productName: "AUTO SERVICE SHIRT by GOLF WANG",
    price: 120.0,
    productImage: product7,
  },
  {
    id: 8,
    productName: "DON'T TRIP UNSTRUCTURED HAT",
    price: 40.0,
    productImage: product8,
  },
];

In the following JSON we can add 100s of objects or use an API pulled data

import React from 'react';

const Product = (props) => {
    const { id, productName, price, productImage } = props.data;
    return (
        <div className='product'>
            <img src={productImage} alt={productName} />
            <div className='description'>
                <p>{productName}</p>
                <p>${price}</p>
                <p><b>{id}</b></p>
            </div>
        </div>
    );
}

export default Product;

• we have checked what kind of datas do we need to display hence we have shown id, productName, price, productImage

• then we just keep rendering the object which will give us the desired output in the screen