Splitting the Components Code issue

#1

Even though I have typed the code shown in the topic, I am not able to get the same output.

import ProductItem from './ProductItem';
import './Products.css';

function Products(props)
{
    return <div className='products'>
        <ProductItem
            name = {props.product[0].name}
            type = {props.product[0].type}
            price = {props.product[0].price}
          />
        <ProductItem
            name = {props.product[1].name}
            type = {props.product[1].type}
            price = {props.product[1].price}
          />
        <ProductItem
            name = {props.product[2].name}
            type = {props.product[2].type}
            price = {props.product[2].price}
          />
        <ProductItem
            name = {props.product[3].name}
            type = {props.product[3].type}
            price = {props.product[3].price}
          />
    </div>
}

export default Products;

This is App.js code
import Products from './components/ProductItem';

function App() {

  const product = [
    {name: 'Beginner to Advanced: React', type: 'Book', price: '2000'},
    {name: 'Iphone 14', type: 'Mobile Phone', price: '80000'},
    {name: 'Rework', type: 'Book', price:'900'},
    {name: 'MacBook', type: 'Laptop', price: '150000'}
  ];
  return (
    <div>
        <h1>
           App Component
        </h1>
        <Products product = {product} />

        
      </div>
  );
}

export default App;

This is ProductItem.js code

import  './ProductItem.css';

function ProductItem(props)
{

    
    return(
    <div className="product-item">
        <div>
            {props.name}
        </div>
        <div className = "product-item__type">
            <p>
                {props.type}
            </p>
        </div>
        <div product-item__price>
            {props.price}
        </div>
    </div>
    );
    
}

export default ProductItem;

My output looks like this:

Screenshot (85)
Screenshot (85)1920×1080 55 KB

#2

@ansh_10 We have asked our team to look into this. You may hear from them soon.

#3

Hello, It’s been 8 days now. When can I expect the reply on this issue?

#4

import Products from ‘./components/ProductItem’;

can you check the file name of the Products component you are importing in the App component. I think it should be import Products from ‘./components/Products’. Also please check all the folder and file names of your imports becase based on what you have shared code is working fine.

1 Like
#5

Yeah just noticed that mistake, thank you for the help.

1 Like