How to Delete Component ?
I wanted to delete the card that is displayed in the image, when you click on the "delete" button. But this isn't not working from what I read from the article : https://www.codingbeautydev.com/blog/react-remove-element-onclick
Code:
https://paste.ofcode.org/xdjSVt6TsrqGCQS9e8CN7r
How to Remove an Element OnClick in React - Coding Beauty
Learn how to easily remove an element onclick in React, whether it's in a list or it's a standalone element.
10 Replies
I'm no react expert. but on line 18.
Shouldn't that be
setComponents(newComponents) instead of setFruits(newComponents)?
think you forgot to change that from the exampleyeah i changed that, but and fixed other things
but it doens't delete the card i selected
rather deletes the last card
from the components array
I looked at your code, thought it would delete the correct component, and testing it shows it works.
yea, i checked it as well
https://playcode.io/1704854
PlayCode.io
JavaScript Playground
Try this online JavaScript Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.
is there a problem with my CARD ? cause I use the exactly same code now right
You are creating components, but you lack the code to insert those components into the page's DOM.
I restructured your code minimally & added an
index.jsx that does that insertion.https://playcode.io/1704936 I fixed this problem of deleting, but only problem now exists is
PlayCode.io
Simple React Component Test
Try this online Simple React Component Test playground with instant live preview and console. Easy & Fast. Experiment yourself.
after you edit the card, and type in something..and you delete any other card, the value in the edited card changes to default when after the deletion. Meaning the text doesn't get saved after deletion
before deletion :
after deletion:
.
Don't ping people just to get them to pay attention to your post again please. If you have something to add or are replying to a question they asked, that's fine but this is just spam.