Get id of item on which button was clicked reactjs javascript

Question

I have an object array like this( in Reactjs functional component) which has this guys :

--------comments (6) [{…}, {…}, {…}, {…}, {…}, {…}]

0(pin):{comment:'1',commentid:264}
1(pin):{comment:'2',commentid:265}
2(pin):{comment:'5',commentid:266}
3(pin):{comment:'1',commentid:267}
4(pin):{comment:'2',commentid:268}
5(pin):{comment:'test',commentid:269}

I have them displayed on page. I want to get id of the object i click. Here is my function.

const deleteComment = (id : Number) => {
    console.log('--------id', id);
}

I tried to do map,filter or foreach but nothing worked,any suggestions please?

<ul>
                        {
                            comments.map((items: any) => {
                                return (
                                    <p
                                        key={uuidv4()}
                                    >Comment : {items.comment}
                                    <button onClick={() => {deleteComment(items.commentid)}}>Delete</button>
                                    </p>
                                );
                            })}
                    </ul>

Update (I restarted the app and everything works fine now)

We'd love to help you. But you need to provide more details. Your React components for instance and how you use (or where) this deleteComment function. Those 2 snippets without any context are not very useful. — ikos23
– ikos23, Commented Jul 9, 2020 at 7:37
Generally it would take a form similar to this onClick={() => deleteComment(/* pass commentId */)} — Drew Reese
– Drew Reese, Commented Jul 9, 2020 at 7:38
You are probably mapping the array and rendering them right? So, within an onClick you can easily do this: onClick={() => deleteComment(comment.commentid } Since you are mapping the comments, you have a comment (or whatever the name you give in map) variable there. — devserkan
– devserkan, Commented Jul 9, 2020 at 7:40

amdev · Accepted Answer · 2020-07-09 07:50:59Z

1

on your deleteComment function , I assume that you are passing the id of clicked comment to the function, you need to do something like this:


const deleteComment = (id : Number): void => {
   const foundComment = comments.find(item => item.commentid === id)
}

this would give you the clicked item, for deleting it , you need to find the index first and then slice the array of comments and set it in your state or return it of what ever you need to do, in below code snippet i try to remove it from comments array:


const deleteComment = (id : Number): void => {

    /** this would give you the index of found item, other vise it would return -1 */
    const foundIndex = comments.findIndex(item => item.commentid === id)

    if(foundIndex !== -1) {
       
       const newCommentsArr = [
           ...comments.slice(0, foundIndex),
           ...comments.slice(foundIndex + 1, comments.length - 1)
       ]

       /** you can setState the `newCommentsArr` or do what ever you want with it */
      
    }

}

answered Jul 9, 2020 at 7:50

amdev

7,8107 gold badges51 silver badges69 bronze badges

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

3 Comments

devserkan Over a year ago

OP already commented that the problem has been solved. Also, if the index will be used, it can be passed directly from the click handler but with the existence of a comment id, bothering with indices is a lot of work. The commentid and a filter method can be used.

amdev Over a year ago

‍‍filter would always return an array, and if you try to find with filter, you might select the first index if it finds the comment, but if you use find , it would return the item it self!

devserkan Over a year ago

comments is already an array, so returning an array is not a problem. We don't need any find or index if we use filter Example: const newComments = comments.filter(comment => id !== comment.commentid);

Collectives™ on Stack Overflow

Get id of item on which button was clicked reactjs javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related