I'm trying to build a simple shop in react.js. My next step would be mapping the products which I store in data.js file into separate cards and then a product list. I am using external libraries for Card.

This is data.js (example):

 export const data = [
    {
      id: 1,
      title: "example title",
      content: "example content",
      image: ".jpg"
    },
    {
      id: 2,
      title: "example title",
      content: "example content",
      image: ".jpg"
    },
    {
      id: 3,
      title: "example title",
      content: "example content",
      image: ".jpg"
    },
    ]

That would be a ponent rendering a single product card:

import React from 'react';
import { Button } from 'react-bootstrap'
import { Card } from '@material-ui/core';
import Col from 'react-bootstrap/Col';
import { data } from '../../../data'


const Product = () => (


  <Col xs={12} md={6} lg={4} key={data.id}>
    <Card style={{ width: '18rem' }}>
      <Card.Header></Card.Header>
      <Card.Img variant="top" src={data.image} />
      <Card.Body>
        <Card.Title>{data.title}</Card.Title>
        <Card.Text>
          {data.content}
        </Card.Text>
        <Button variant="primary">Add to cart</Button>
        <Button>Add to favs</Button>
      </Card.Body>
    </Card>
  </Col>
)

export default Product;

and finally, the ponent rendring many products:

import React from 'react';

import Row from 'react-bootstrap/Row';
import {data} from '../../../data'

import Product  from '../Product/Product';

import styles from './Shop.module.scss';

const Shop = () => {

  return (
   
      <div className='row-wrapper'>
        <Row>
           {data.map(product => (
            <Product key={product.id} {...product} />
          ))}  
        </Row>
      </div>
    ) 
  
};

export default Shop;

This does not work, I receive errors in the console. What am I missing?

edit: the error I get:

Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

stacktrace:

Blockquote Check your code at Product.js:13. in Product (at Shop.js:17) in div (created by Row) in Row (at Shop.js:15) in div (at Shop.js:14) in Shop (created by Context.Consumer) in Route (at Header.js:24) in Switch (at Header.js:22) in div (at Header.js:13) in Header (at MainLayout.js:15) in div (at MainLayout.js:13) in MainLayout (at App.js:12) in Router (created by BrowserRouter) in BrowserRouter (at App.js:11) in App (at src/index.js:6)

I'm trying to build a simple shop in react.js. My next step would be mapping the products which I store in data.js file into separate cards and then a product list. I am using external libraries for Card.

This is data.js (example):

 export const data = [
    {
      id: 1,
      title: "example title",
      content: "example content",
      image: "https://i.imgur./example.jpg"
    },
    {
      id: 2,
      title: "example title",
      content: "example content",
      image: "https://i.imgur./example.jpg"
    },
    {
      id: 3,
      title: "example title",
      content: "example content",
      image: "https://i.imgur./example.jpg"
    },
    ]

That would be a ponent rendering a single product card:

import React from 'react';
import { Button } from 'react-bootstrap'
import { Card } from '@material-ui/core';
import Col from 'react-bootstrap/Col';
import { data } from '../../../data'


const Product = () => (


  <Col xs={12} md={6} lg={4} key={data.id}>
    <Card style={{ width: '18rem' }}>
      <Card.Header></Card.Header>
      <Card.Img variant="top" src={data.image} />
      <Card.Body>
        <Card.Title>{data.title}</Card.Title>
        <Card.Text>
          {data.content}
        </Card.Text>
        <Button variant="primary">Add to cart</Button>
        <Button>Add to favs</Button>
      </Card.Body>
    </Card>
  </Col>
)

export default Product;

and finally, the ponent rendring many products:

import React from 'react';

import Row from 'react-bootstrap/Row';
import {data} from '../../../data'

import Product  from '../Product/Product';

import styles from './Shop.module.scss';

const Shop = () => {

  return (
   
      <div className='row-wrapper'>
        <Row>
           {data.map(product => (
            <Product key={product.id} {...product} />
          ))}  
        </Row>
      </div>
    ) 
  
};

export default Shop;

This does not work, I receive errors in the console. What am I missing?

edit: the error I get:

Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

stacktrace:

Blockquote Check your code at Product.js:13. in Product (at Shop.js:17) in div (created by Row) in Row (at Shop.js:15) in div (at Shop.js:14) in Shop (created by Context.Consumer) in Route (at Header.js:24) in Switch (at Header.js:22) in div (at Header.js:13) in Header (at MainLayout.js:15) in div (at MainLayout.js:13) in MainLayout (at App.js:12) in Router (created by BrowserRouter) in BrowserRouter (at App.js:11) in App (at src/index.js:6)

• javascript
• reactjs

• 1 Destructure id, title, content, and image from the passed props ({...product}) in Product and render directly, i.e. it'll be just title, not data.title. – Drew Reese Commented Feb 15, 2021 at 22:30
• the error says: Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports. – Al_Milligan Commented Feb 16, 2021 at 21:50
• 1 try removing import { data } from '../../../data' from Product ponent. plus what @DrewReese said. – Shweta patel Commented Feb 16, 2021 at 22:10
• 1 Which import or ponent is undefined? Where is the error pointing to? What line of code? Can you include the stacktrace in your question? – Drew Reese Commented Feb 16, 2021 at 22:26
• 2 What version of Material-UI are you using? I don't think the Card ponent is a pound ponent. – Drew Reese Commented Feb 16, 2021 at 22:58

1 Answer 1

You can pass the product details from the shop ponent to the Product Component through the props, the following code should works:

Product Component

import React from 'react';
import { Button } from 'react-bootstrap'
import { Card } from '@material-ui/core';
import Col from 'react-bootstrap/Col';


const Product = ({product}) => (


  <Col xs={12} md={6} lg={4} key={product.id}>
    <Card style={{ width: '18rem' }}>
      <Card.Header></Card.Header>
      <Card.Img variant="top" src={product.image} />
      <Card.Body>
        <Card.Title>{product.title}</Card.Title>
        <Card.Text>
          {product.content}
        </Card.Text>
        <Button variant="primary">Add to cart</Button>
        <Button>Add to favs</Button>
      </Card.Body>
    </Card>
  </Col>
)

export default Product;

Shop Component

import React from 'react';

import Row from 'react-bootstrap/Row';
import {data} from '../../../data'

import Product  from '../Product/Product';

import styles from './Shop.module.scss';

const Shop = () => {

  return (
   
      <div className='row-wrapper'>
        <Row>
           {data.map(product => (
            <Product key={product.id} product={product} />
          ))}  
        </Row>
      </div>
    ) 
  
};

export default Shop;