map() function in React JavaScript – return statement

How to use map function in our React app to map the data of array. Different ways to use the map function in javascript. Using map function with curly brackets and return statement, using with parathesis without a return statement.

Example – map function with curly brackets and return statement

constants/data.js

export const navData = [
    {
    url: "https://rukminim1.flixcart.com/flap/128/128/image/22fddf3c7da4c4f4.png?q=100",
    text: "Mobile",
  },
  {
    url: "https://rukminim1.flixcart.com/flap/128/128/image/82b3ca5fb2301045.png?q=100",
    text: "Fashion",
  },
  {
    url: "https://rukminim1.flixcart.com/flap/128/128/image/69c6589653afdb9a.png?q=100",
    text: "Electronics",
  },
  {
    url: "https://rukminim1.flixcart.com/flap/128/128/image/ee162bad964c46ae.png?q=100",
    text: "Home",
  },
  {
    url: "https://rukminim1.flixcart.com/flap/128/128/image/0ff199d1bd27eb98.png?q=100",
    text: "Appliances",
  },
];

NavBar.jsx

import React from "react";
import { navData } from "../../constants/data";

export const NavBar = () => {
  return (
    <div>
      {navData.map((item) => {
        return (
          <div>
            <img src={item.url} alt="" />
            <h2> {item.title}</h2>
          </div>
        );
      })}
    </div>
  );
};

Example – map function with parathesis without a return

NavBar.jsx

import React from "react";
import { navData } from "../../constants/data";

export const NavBar = () => {
  return (
    <div>
      {navData.map((item) => (
        <div>
          <img src={item.url} alt="" />
          <h2> {item.title}</h2>
        </div>
      ))}
    </div>
  );
};