passing an element's[Shopping items] to the modal is not working

Question

So, I have been trying to pass the following information my my pop-up modal. I am using react-modal. The indecies of each element or each product is showing correctly. when I console.log(index) for each item the correct index appears.

The problem appearing is that when I click on SHOW MORE button, all of the items appear on top of each other.

import React, { Component } from "react";
// import { productsInfo } from "./ProductsData";
import Modal from "react-modal";
import "./Products.css";
import ProductDetailsPopUp from "./ProductDetailsPopUp";
import axios from "axios";
// import MainProductBtn from "./MainProductBtn";
// import MainProductBtn from "./MainProductBtn";
Modal.setAppElement("#root");
export default class Products extends Component {
  state = {
    productsData: [],
    modalIsOpen: false,
    currentItem: null,
    title: null,
    description: null,
    price: null,
    rating: null,
    image: null,
    category: null,
  };
  componentDidMount() {
    axios.get("https://fakestoreapi.com/products").then((res) => {
      console.log(res.data);
      this.setState({ productsData: res.data });
      // console.log(this.state.productsData);
    });
  }
  OpenModal = (item) => {
    this.setState({
      modalIsOpen: true,
      currentItem: item,
      // title: item,
      // description: item,
      // price: item,
      // rating: item,
      // image: item,
      // category: item,
    });
  };
  CloseModal = () => {
    this.setState({ modalIsOpen: false });
  };
  // changeProduct = (item, index) => {
  //   this.setState({ showProduct: item });
  // };
  render() {
    console.log(this.state.productsData);

    // const {id, img, title, price, isNew, country, currency} = productsInfo

    return (
      <div className="ProductsContainer">
        {this.state.productsData.map((item, index) => {
          return (
            <div className="cardHolder" key={item.id}>
              <img src={item.image} alt="Products" />
              <button
                onClick={() => {
                  this.OpenModal();
                  console.log(index);
                }}
                className="MainProductBtn"
                productId={item.id}
              >
                QUICK VIEW
              </button>

              <Modal
                key={item.id}
                className="mainModal"
                style={{
                  overlay: {
                    backgroundColor: "#3333",
                    opacity: 0.4,
                    transition: "0.4s",
                  },
                }}
                isOpen={this.state.modalIsOpen}
                onRequestClose={this.CloseModal}
              >
                <div className="popupHeader" key={item.id}>
                  <h3>{item.title}</h3>
                  <button onClick={this.CloseModal}>×</button>
                </div>
                <ProductDetailsPopUp
                  productsData={this.state.productsData}
                  productid={item.id}
                  title={item.title}
                  description={item.description}
                  price={item.price}
                  rating={item.rating.rate}
                  image={item.image}
                  currentItem={this.state.currentItem}
                  category={item.category}
                />
              </Modal>
              <p>{item.title}</p>
              <small>{`${item.price} USD`}</small>
            </div>
          );
        })}
      </div>
    );
  }
}

// How Can I Include a useState from a different component into another component like modal?

and the ProductDetailsPopUp component is :

import React from "react";
import "./ProductDetailsPopUp.css";

const ProductDetailsPopUp = ({
  title,
  description,
  price,
  rating,
  image,
  category,
  productid,
}) => {
  console.log(productid);
  return (
    <div className="mainProductContainer">
      <div className="rightSidePics">
        <img src="./images/products/product-home-1.png" alt="product" />
        <img src="./images/products/product-home-1.png" alt="product" />
        <img src="./images/products/product-home-1.png" alt="product" />
        <img src="./images/products/product-home-1.png" alt="product" />
        <img src="./images/products/product-home-1.png" alt="product" />
      </div>
      <div className="mainPic">
        <img src={image} alt="product" />
      </div>
      <div className="productInformation">
        <h3>{title}</h3>
        <hr />
        <div className="priceAndRating">
          <span>{price}</span>
          <span>{rating}</span>
        </div>
        <h4>Description</h4>
        <p>{description}</p>
        <div className="brandName">
          <h4>Brand</h4>
          <p>Brand Name</p>
        </div>
        <div className="categoryName">
          <h4>Category</h4>
          <p>{category}</p>
        </div>
        <h4>Quantity</h4>
        <div className="quantityInfo">
          <button className="minusBtn">-</button>
          <input type="text" />
          <button className="plusBtn">+</button>
          <button className="addToCart">ADD TO CART</button>
        </div>
      </div>
    </div>
  );
};

export default ProductDetailsPopUp;

So apparently, I tried sending all the information as props to ProductDetailsPopUp component as well as other things. nothing worked.

What am I missing exactly ?

passing an element's[Shopping items] to the modal is not working

0 Answers0