Skip to content

props are not working when using map method in react.js

props are passing fine when we are passing them as a whole array of objects but it is not working when I am passing the props by traversing through the array using map function.

import { React, useEffect, useState } from "react";

import axios from "axios";

import "./Home.css";
import Cardimg from "./Cardimg";
const Home = props => {
    return (
            <div className="header">PHOTO GALLERY</div>
            <div className="photos">
                { => {
                    <Cardimg data={e.ImgUrl}></Cardimg>;

export default Home;

in the above code props are passing when I am passing manually in Cardimg component…but as soon as I start using map then it doesn’t work…like the props are not reaching the component.

below is my Cardimg component

import React from 'react'

const Cardimg = (props) => {
    return (

export default Cardimg


You need to return the Cardimg component inside map callback function.

Either like this

{ => {
        return <Cardimg data={e.ImgUrl}></Cardimg>;

Or like this

{ => <Cardimg data={e.ImgUrl}></Cardimg>)