Having a problem setting this group of objects to an array

Question

So, I have this function called !HandleDetail that gets the item once clicked and loads a detail screen. When this reloads, it shows only one object no matter what object I clicked on. So if I clicked on a iPhone, and I reload the browser, it reloads with the only item (a T-shirt) object showing. I am sure this has something to do with state as I fixed other bugs like this using state. I am thinking I have to map over the created array to gather the information and set the state of it. Here is a video showing what I mean: https://tyriquedaniel14-gmail.tinytake.com/tt/MzYwMDcwN18xMDg4NTEzMQ. To make things clear, I am trying to have the detail state show the corresponding item with the same id.

 state = {
    products: [],
      clothing: [],
      gadget: [],
    smoke:[],
    detailProduct: detailProduct,
    cart: [],
    modalOpen: false,
    modalProduct: detailProduct,
    cartSubTotal: 0,
    cartTax: 0,
    cartTotal: 0
  };

 getItem = id => {
    const product = this.state.products.find(item => item.id === id);

    return product;
  };

  handleDetail = id => {
    const product = this.getItem(id);
    this.setState(() => {
      return { detailProduct: product };
    });
  };

export const detailProduct = {
  id: 1,
  title: "COMME DES GARCONS TEE",
  img: "img/product-1.png",
  img2: "img/product-1-1.png",
  img3: "img/product-1-2.png",
  img4: "img/product-1-3.png",
  luxury: "All Luxuryitems are inspected to verify authenticity",
  price: 200,
  info: " COMME DES GARCONS PLAY BASIC LOGO TEE",
  inCart: false,
  count: 0,
  total: 0,
  size1: "Small",
  size2: "Medium",
  size3: "Large",
  size4: "Extra Large",
  fabric: "100% Cotton",
  category: "Mens Fashion"
};
 This is My router link
            <Link to="/details">

I am trying to turn this into an array of all products. I have tried adding the map method and setting detailProduct to product.

Cristóbal Soto · Accepted Answer · 2019-06-23 04:37:26Z

1

It is the normal behaviour in the react state, if you refresh the page the state becomes the initial state as you set it to your const with the detailProduct of your t-shirt, if you want to show a specific item based on the click you need to add the id to the url, because everytime you refresh the page your state is reseted so no record of the actions you did clicking.

Use a url with the id like details/id that way your app can remember the item you visited

answered Jun 23, 2019 at 4:37

Cristóbal Soto

915 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheGreen Lightbulb Over a year ago

Okay how would i go about implementing this?

Cristóbal Soto Over a year ago

you need to pass the id of the product to the url when you click it, are you using react-route? it is hard to explain without seeing your code

TheGreen Lightbulb Over a year ago

Yes I am using react router dom and I have a handle detail function when I click the item I will upload the code in the morning it is 3am now.

Collectives™ on Stack Overflow

Having a problem setting this group of objects to an array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related