0

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)

Nika Roffy
  • 891
  • 2
  • 8
  • 20
  • 3
    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 Jul 09 '20 at 07:37
  • Sorry i will fix it – Nika Roffy Jul 09 '20 at 07:38
  • Generally it would take a form similar to this `onClick={() => deleteComment(/* pass commentId */)}` – Drew Reese Jul 09 '20 at 07:38
  • 1
    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 Jul 09 '20 at 07:40
  • Yes I'm mapping it, i will try it thank you – Nika Roffy Jul 09 '20 at 07:40
  • Does this answer your question? [React js onClick can't pass value to method](https://stackoverflow.com/questions/29810914/react-js-onclick-cant-pass-value-to-method) – devserkan Jul 09 '20 at 07:41
  • I tried to do that way but it is giving me undefined,I think it because I need to find index first – Nika Roffy Jul 09 '20 at 07:42
  • BTW, once you get your issue sorted out you might not want to `key={uuidv4()}` as this will generate a new key *every* render cycle and defeat the purpose of using a react key in the first place. – Drew Reese Jul 09 '20 at 07:45
  • It still screams that every element needs it own key lol,but i still could not solve my current issue – Nika Roffy Jul 09 '20 at 07:46
  • The way you are doing (updated question) should work. Maybe a sandbox would be useful. I'm pretty sure if I move your snippet to a sandbox it would work. Also, I was going to warn about `uuid4()` part. You already have a `commentid` (I assume which is unique), use it. – devserkan Jul 09 '20 at 07:46
  • Is the console that gives you undefined or the comments inside the ul tag? – Rohan Agarwal Jul 09 '20 at 07:47
  • Nvm I restarted application and it worked,thank you all for your time and patience – Nika Roffy Jul 09 '20 at 07:48

1 Answers1

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 */
      
    }

}
amdev
  • 6,703
  • 6
  • 42
  • 64
  • 1
    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. – devserkan Jul 09 '20 at 07:54
  • `‍‍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! – amdev Jul 09 '20 at 07:57
  • `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);` – devserkan Jul 09 '20 at 08:02