hi all, I am new in React js. I am creating a project using react js with redux. I hit a rest call in action.js file, and then reducer will update the state of store. In itemDetailsPage.js component i will use the store values and it will works fine, but when i use the map() method to render each image in itemImages array which is in the store state it show error that "Cannot read property 'map' of undefined". itemImages is an array , when i iterate this array in another component it will work fine, but in this component it shows error. This is my action code:- ----------------------------- export const getItem = (id) => async dispatch => { try{ const res = await axios.get(`http://localhost:8086/api/item/getItem/${id}`); console.log(`success message ${res.data}`) dispatch({ type: GET_ITEM, payload: res.data.data }); }catch(error){ console.log(`error message ${error}`) } }; This is my reducer code:- ----------------------------- import { act } from 'react-dom/test-utils'; import { GET_ITEM, GET_ITEMS } from './../actions/Type'; const initialState={ items:[], item:{} }; export default function (state=initialState,action){ switch(action.type){ case GET_ITEMS: return{ ...state, items:action.payload } case GET_ITEM: return{ ...state, item:action.payload } default: return state; } } This is my ItemDetailsPage.js (where exactly i got error):- ----------------------------- import React, { Component } from 'react' import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; import { successAlert } from '../layout/SweetAlert'; import { getItem } from './../../actions/ItemActions'; class ItemDetailsPage extends Component { constructor(props){ super(props); this.onAddToCartClick=this.onAddToCartClick.bind(this) } onAddToCartClick(){ successAlert("Cart","Item added to the cart successfully"); } componentDidMount(){ const { id } = this.props.match.params; this.props.getItem(id); } render() { const item=this.props.item return (

{item.itemImages.map(itemImage=>( console.log("inside itemimages array") ))}

{item.name}

{item.subCategory}

₹ {item.price}

{item.description} Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, sapiente illo. Sit error voluptas repellat rerum quidem, soluta enim perferendis voluptates laboriosam. Distinctio, officia quis dolore quos sapiente tempore alias.

Color	Red
Category	{item.category}
Sub-Category	{item.subCategory}

Quantity

{/*

*/}

) } } const mapStateToProps=state=>({ item:state.itemReducer.item }) export default connect(mapStateToProps,{getItem})(ItemDetailsPage);

keshav12345

TypeError: Cannot read property 'map' of undefined

Join Our Newsletter. No Spam, Only the good stuff.