Map function not working in React js component

Question

I am new to react js. I am trying to use the map function on an array that is stored in another file called products.js , when I console log the data it is showing by not showing in the screen. This is my code for the component:

import React from 'react'
import products from '../products'
import {Row,Col} from 'react-bootstrap'

const HomeScreen = () => {
    console.log(products)
    return (
        <>
            <h1>Latest Products</h1>
            <Row>
                {products.map(product => {
                    <h3 key={product._id}>{product.name}</h3>
               })}
            </Row>
        </>
    )
}

export default HomeScreen

This is the product.js code:

const products = [
  {
    _id: '1',
    name: 'Airpods Wireless Bluetooth Headphones',
    image: '/images/airpods.jpg',
    description:
      'Bluetooth technology lets you connect it with compatible devices wirelessly High-quality AAC audio offers immersive listening experience Built-in microphone allows you to take calls while working',
    brand: 'Apple',
    category: 'Electronics',
    price: 89.99,
    countInStock: 10,
    rating: 4.5,
    numReviews: 12,
  },
  {
    _id: '2',
    name: 'iPhone 11 Pro 256GB Memory',
    image: '/images/phone.jpg',
    description:
      'Introducing the iPhone 11 Pro. A transformative triple-camera system that adds tons of capability without complexity. An unprecedented leap in battery life',
    brand: 'Apple',
    category: 'Electronics',
    price: 599.99,
    countInStock: 7,
    rating: 4.0,
    numReviews: 8,
  },
  {
    _id: '3',
    name: 'Cannon EOS 80D DSLR Camera',
    image: '/images/camera.jpg',
    description:
      'Characterized by versatile imaging specs, the Canon EOS 80D further clarifies itself using a pair of robust focusing systems and an intuitive design',
    brand: 'Cannon',
    category: 'Electronics',
    price: 929.99,
    countInStock: 5,
    rating: 3,
    numReviews: 12,
  },
  {
    _id: '4',
    name: 'Sony Playstation 4 Pro White Version',
    image: '/images/playstation.jpg',
    description:
      'The ultimate home entertainment center starts with PlayStation. Whether you are into gaming, HD movies, television, music',
    brand: 'Sony',
    category: 'Electronics',
    price: 399.99,
    countInStock: 11,
    rating: 5,
    numReviews: 12,
  },
  {
    _id: '5',
    name: 'Logitech G-Series Gaming Mouse',
    image: '/images/mouse.jpg',
    description:
      'Get a better handle on your games with this Logitech LIGHTSYNC gaming mouse. The six programmable buttons allow customization for a smooth playing experience',
    brand: 'Logitech',
    category: 'Electronics',
    price: 49.99,
    countInStock: 7,
    rating: 3.5,
    numReviews: 10,
  },
  {
    _id: '6',
    name: 'Amazon Echo Dot 3rd Generation',
    image: '/images/alexa.jpg',
    description:
      'Meet Echo Dot - Our most popular smart speaker with a fabric design. It is our most compact smart speaker that fits perfectly into small space',
    brand: 'Amazon',
    category: 'Electronics',
    price: 29.99,
    countInStock: 0,
    rating: 4,
    numReviews: 12,
  },
]

export default products

And this is my App.js code :

import React from 'react'
import {Container} from 'react-bootstrap'
import Header from './components/Header'
import Footer from './components/Footer'
import HomeScreen from './screens/HomeScreen'

const App=()=> {
  return (
    <>
      <Header />
      <main>
         <Container className='py-3'>
          <HomeScreen/>
          </Container>
      </main>
      <Footer/>
    </>
  );
}

export default App;

Why is this happening? I have tried looking up some solutions but failed. Thank you for helping

Panda · Accepted Answer · 2021-10-05 19:05:54Z

1

Add a return statement in the map function.

{products.map((product) => {
    return <h3 key={product._id}>{product.name}</h3>;
  })}

answered Oct 5, 2021 at 19:05

Panda

341 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Nacho · Accepted Answer · 2021-10-05 18:57:51Z

1

I think the problem is that you need to add a return statement before the h3:

<Row>
    {products.map(product => {
          return <h3 key={product._id}>{product.name}</h3>
    })}
  </Row>

answered Oct 5, 2021 at 18:57

Nacho

9741 gold badge7 silver badges9 bronze badges

3 Comments

Heretic Monkey Over a year ago

Or remove the curly brackets...

Nacho Over a year ago

Sure, even much more elegant

Abdullah Ibn Shahin Over a year ago

thank you it worked

femchaps · Accepted Answer · 2021-10-05 19:07:54Z

1

If you want to do it this way without using 'return', there are 2 options: Option 1: Remove the curly braces

<Row>
    {products.map(product => return <h3 key={product._id}>{product.name}</h3>)}
  </Row>

Option 2: Use () instead of the curly braces (Most especially when you are gonna add more elements later)

<Row>
    {products.map(product => (
          <h3 key={product._id}>{product.name}</h3>
          <...other html elements>
    ))}
  </Row>

answered Oct 5, 2021 at 19:07

femchaps

415 bronze badges

Collectives™ on Stack Overflow

Map function not working in React js component

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related