It's a really simple project for school, and I've spent hours trying to solve the issue (reinstalling node modules, updating nodeJs version etc. etc.). Thank you in advance.

Here is my code:

import './App.css';
import Products from "./components/Products/Products"

function App() {
  return (
    <div className="App">
        <Products/>
    </div>
  );
}

export default App;

Products.jsx:

import React from "react"; import {Grid, MuiThemeProvider} from '@material-ui/core';

import Product from "./Product/Product";

const products = \[ {id: 1, name: 'Shoes', description: 'Running shoes.', price: '$5'}, {id: 2, name: 'Macbook', description: 'Apple Macbook.', price: '$100'}, \];

const Products = () =\> { return 
( 
\<main\> 
\<Grid container justifyContent="center" spacing={4}\> {products.map( (product) =\> { \<Grid item key={product.id} xs={12} sm={6} md={4} lg={3}\> \<Product product={product} /\> \</Grid\> } ) } \</Grid\> \</main\> ); }

export default Products;

Product.jsx:

import React from 'react';
import { Card, CardMedia, CardContent, CardActions, Typography, IconButton, MuiThemeProvider } from '@material-ui/core';
import { AddShoppingCart } from '@material-ui/icons';

import useStyles from './styles';

const Product = ({ product, onAddToCart }) => {
  const classes = useStyles();

  const handleAddToCart = () => onAddToCart(product.id, 1);

  return (
    <Card className={classes.root}>
        <CardMedia className={classes.media} image='' title={product.name}/>
    
    </Card>
  );
};

export default Product;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <App />,
  document.getElementById("root")
);

CodePudding user response：

What Node version, and did you check for any errors in your browser's console?

(Can't comment, fml)

CodePudding user response：

while mapping you are not returning the jsx (remove {} or use return), try to use the Products function below it should work

  const Products = () => {
    return (
      <main>
        <Grid container justifyContent="center" spacing={4}>
          {products.map(product => (
            <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
              <Product product={product} />
            </Grid>
          ))}
        </Grid>
      </main>
    );
  };