Getting Id of dynamically rendered element

1

Hi everyone, I am trying to do something simple with a little complex twist.
I want to get the clicked item’s id. This normally works fine but now I am trying to do the same on an element that is dynamically rendered.
For instance.

 var cartitems = this.props.cart.map(
        ({ title, image, desc, price, id }) => (
          <Card key={title} id={id} style={{ width: "18rem" }}>
            <Card.Img variant="top" src={image} width="10rem" height="180rem" />
            <Card.Body>
              <Card.Title>{title}</Card.Title>
              <Card.Text>
                {desc} <br />
                {price}
              </Card.Text>
              <Button
                variant="btn btn-warning"
                onClick={this.props.Removefromcart}
              >
                Remove from cart
              </Button>
            </Card.Body>
          </Card>
        )
      );

Ideally I would like the “remove from cart” button to give me the id of the button that was clicked. This works fine on manually entered elements, but not the rendered ones.

 Removefromcart = ( e ) => {

console.log(e.target.id)
   
};

As of now I am just using a very simple function, once I get the ID of the item I should be totally set to finish this myself.
Thanks in advance for your expertise.

2

Try

() => console.log(id)

You don’t want the id from the event target (the button) you want the variable for the id off the cart item you’ve already destructured.

Does that make sense?

3

Ah, yes. I forgot to mention that I had been using e.target.parentElement.id
and the arrow function there returns undefined

4

Did you try what I suggested though? It should work.

Here’s a very simple pen demo to show what I mean:

5

I did, it’s still returning undefined. I am guessing it’s my error.

Removefromcart = ( id ) => {

console.log(id)
    
};

while in the cart I did this

<Button
                variant="btn btn-warning"
                onClick={() => this.props.Removefromcart(id)}
              >

I really appreciate your help. I think your method is a working one, I am just having an issue converting it to react syntax.

6

That’s odd. Your syntax looks fine.

Are you sure the id is defined?

Try adding the id to the button label like
Remove from cart {id} and see if it renders the id properly.

7

I’m pretty sure Id is defined. It would explain a fair amount if it wasnt though.
I’ve put my full code on code sandbox so you can look at it all. The pages we have been talking about are app.js and cart.js


Again, thanks for your help!
8

Yeah, you’re not passing the id in with the rest of the cart props.

For example the barbarian sword object only contains:

{
  title: "Barbarian Sword",
  desc: "Over 5 feet in length. Classic sword of the Βάρβαρος.",
  price: 300,
  image: "/itemphotos/medieval/barbariansword.jpg",
}

These are the same attributes on the item you are adding in your addToCart function too. You aren’t capturing the id in state at all.

9

I finally see the issue. Thank you so much for helping me.
for the record, it wasn’t in the object because I was using the bronze ones which have an id. The problem was with the add to cart method in the button itself not having an id.

onClick={e => this.handleAddToCart(e, { title, image : imageUrl, desc, price, id  //id was missing})

Thanks so much for your help. I really needed another pair of eyes.

1 Like