I am trying to print array inside object using map function but I get :Cannot read property map of undefined

Question

I'm trying to print the properties of Selectedproduct object inside Modal section and every thing works well until it reaches to "description" array property , it shows me "Cannot read property 'map' of undefined". eventhough when I use console.log(Selectedproduct) the description property appears normally,but when I code console.log(Selectedproduct.description) I dont know why it consider it as undefined .can you please tell me why it can't see the description as stand alone property ?

import React, { Component } from "react";
import FormatCurrency from "../Components/util";
import Slide from "react-reveal/Slide";
import Modal from "react-modal";
import Zoom from "react-reveal/Zoom";
import { connect } from "react-redux";
import { GetProducts } from "../Actions/ItemsActions";
import { AddToCart } from "../Actions/CartActions";
class Products extends Component {
  constructor(props) {
    super();
    this.state = {
      show: false,
      Selectedproduct: {},
    };
  }
  showModal = (product) => {
    console.log(product);
    this.setState({ show: true, Selectedproduct: product });
  };

  hideModal = () => {
    this.setState({ show: false });
  };

  componentDidMount() {
    this.props.GetProducts();
  }
  render() {
    const { Selectedproduct } = this.state;
    return (
      <div>
        <Slide left cascade={true}>
          {!this.props.products ? (
            <div> Loading..</div>
          ) : (
            <ul className="products">
              {this.props.products.map((product) => (
                <li key={product._id}>
                  <div className="product">
                    <a href={"#" + product._id}>
                      <img
                        src={product.image}
                        alt={product.title}
                        onClick={() => this.showModal(product)}
                      ></img>
                      <p>{product.title}</p>
                    </a>
                    <div className="product-price">
                      <div> {FormatCurrency(product.price)}</div>

                      <button
                        onClick={() => this.props.AddToCart(product)}
                        className="button primary overlay"
                      >
                        {" "}
                        Add to cart
                      </button>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </Slide>
        <Modal isOpen={this.state.show} onRequestClose={this.hideModal}>
          <Zoom>
            <button className="close-modal" onClick={this.hideModal}>
              x
            </button>
            <div className="product-details">
              <img
                src={Selectedproduct.image}
                alt={Selectedproduct.title}
              ></img>
              <div className="product-details-description">
                <p>{Selectedproduct.title}</p>
                <ul>
                {Selectedproduct.description.map((x)=>(<li>x</li>))}
                </ul>
                <div className="product-price">
                  <div>{FormatCurrency(Selectedproduct.price)}</div>
                  <button
                    className="button primary"
                    onClick={() => {
                      this.props.AddToCart(Selectedproduct);
                      this.hideModal();
                    }}
                  >
                    {" "}
                    Add to cart
                  </button>
                </div>
              </div>
            </div>
          </Zoom>
        </Modal>
      </div>
    );
  }
}
export default connect((state) => ({ products: state.products.filterdItems }), {
  GetProducts,
  AddToCart,
})(Products);

Answer 1

Try this as your state property seems still undefined at runtime.

{Selectedproduct.description.map((x)=>(<li>x</li>))}

replace with:

{Selectedproduct && Selectedproduct.description? Selectedproduct.description.map((x)=>(<li>x</li>)):null}