I'm doing an e-commerce with React and I'm getting an error say
Cannot read properties of undefined (reading 'map')
Which doesn't make sense because I have done the same thing in another component and it works well.
Here is my code below with the comment on the map function that isn't working. Let me if something isn't clear. I've checked the syntax errors and all works fine
export class CartItem extends Component {
constructor(props) {
super(props);
this.state={
product: {},
failedToLoad: false
}
}
async componentWillMount(){
let data = await this.getProduct(this.props.product.itemId);
// let product = data.data.product;
// this.setState({product: product});
if (data.data.product) {
this.setState({product: data.data.product});
} else {
this.setState({failedToLoad: true});
}
}
async getProduct(id){
return await fetchTheQuery(
`query getProduct($id: String!){
product(id: $id){
name
prices{
currency
amount
}
}
}`, {id: id}
)
}
render() {
const {addProduct, productsToPurchase} = this.props.cartContext
const {selectedCurrency} = this.props.currencyContext
console.log(this.state.product.prices)
let productFetched = this.state.product
if (this.state.failedToLoad){
return (<div>Something went wrong</div>)
}
else if (productFetched){
return(
<div>
<h2> {this.state.product.name} </h2>
<h5>
{/*There is an error here*/}
{ this.state.product.prices.map(
price =>{
if (price.currency == selectedCurrency){
return( <> { getSymbolFromCurrency(selectedCurrency) +" "+ price.amount }</> )
}
}
)}
</h5>
<button onClick={() => {
addProduct(this.props.product.itemId, this.state.product.prices)
}}> Add </button>
<h4>{productsToPurchase[this.props.itemIndex].qty}</h4>
<hr/>
</div>
)
}
else {
return <p>Loading............</p>
}
}
}
You need to check if the this.state.product.prices exists in the object.
You are getting this error since the collection is empty during the first render.
{ this.state.product.prices
&& this.state.product.prices.map(
price =>{
if (price.currency == selectedCurrency){
return(
<>
{
getSymbolFromCurrency(selectedCurrency) +" "+ price.amount }.
</> )
}
}
)}