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 (
<div className="row">
<div className="col-md-6 mb-4 mb-md-0">
<div id="mdb-lightbox-ui"></div>
<div className="mdb-lightbox">
<div className="row product-gallery mx-1">
<div className="col-18 mb-0">
<div class="container my-4">
<div id="carouselExample1" class="carousel slide z-depth-1-half" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img height="500px" class="d-block w-100 " src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="First slide"/>
</div>
<div class="carousel-item">
<img height="500px" class="d-block w-100 " src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Second slide"/>
</div>
<div class="carousel-item">
<img height="500px" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Third slide"/>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div className="col-12">
<div className="row">
{item.itemImages.map(itemImage=>(
console.log("inside itemimages array")
))}
className="img-fluid"/>
className="img-fluid"/>
className="img-fluid"/>
className="img-fluid"/> </div>
</div>
</div>
</div>
</div>
<div className="col-md-6">
<h5>{item.name}</h5>
<p className="mb-2 text-muted text-uppercase small">{item.subCategory}</p>
<ul className="rating">
<i className="fas fa-star fa-sm text-primary"></i>
<i className="fas fa-star fa-sm text-primary"></i>
<i className="fas fa-star fa-sm text-primary"></i>
<i className="fas fa-star fa-sm text-primary"></i>
<i className="far fa-star fa-sm text-primary"></i>
</ul>
<p><span className="mr-1"><strong>₹ {item.price}</strong></span></p>
<p className="pt-1">{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.</p>
<div className="table-responsive">
<table className="table table-sm table-borderless mb-0">
<tbody>
<tr>
<th className="pl-0 w-25" scope="row"><strong>Color</strong></th>
<td>Red </td>
</tr>
<tr>
<th className="pl-0 w-25" scope="row"><strong>Category</strong></th>
<td>{item.category}</td>
</tr>
<tr>
<th className="pl-0 w-25" scope="row"><strong>Sub-Category</strong></th>
<td>{item.subCategory}</td>
</tr>
</tbody>
</table>
</div>
<hr/>
<div className="table-responsive mb-2">
<table className="table table-sm table-borderless">
<tbody>
<tr>
<td className="pl-0 pb-0 w-25">Quantity</td>
</tr>
<tr>
<td className="pl-0">
{/*
<div className="def-number-input number-input safari_only mb-0">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
className="minus"></button>
<input className="quantity" min="0" name="quantity" value="1" type="number"/>
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
className="plus"></button>
</div>*/}
</td>
Y</tr>
</tbody>
</table>
</div>
<button type="button" className="btn btn-primary btn-md mr-1 mb-2">Buy now</button>
<button type="button" className="btn btn-light btn-md mr-1 mb-2" onClick={this.onAddToCartClick}><i
className="fas fa-shopping-cart pr-2"></i>Add to cart</button>
</div>
</div>
</section>
</div>
)
}
}
const mapStateToProps=state=>({
item:state.itemReducer.item
})
export default connect(mapStateToProps,{getItem})(ItemDetailsPage);
Top comments (0)