when i click on the reply button, it affects all the components instead of just one. how can i achieve it to only affect the component i clicked instead of all similar components

note: what im trying to achieve is an interactive comment section

.

First give all the comments an id, then change the changeCommet to a ternary expression. Like
changeCommet(() => {
return (id === comment.id ? event.target.value : " " )
})

Phantaminum1:
First give all the comments an id, then change the changeCommet to a ternary expression. Like
changeCommet(() => {
return (id === comment.id ? event.target.value : " " )
})

Would I have to manually give them IDs, since it's supposed to be a comment section and dynamic

Isn't there a react hook I can use for it

Fourpockets:


Would I have to manually give them IDs, since it's supposed to be a comment section and dynamic

Isn't there a react hook I can use for it

You should add an id property in your comment object. If you are saving your comment to a database,
Every record has a primary key that is unique. You can use that as your id. If you are saving your data in memory , then u have to add the id property manually, may be start from 1 then increment every time you call your addComment function

Fourpockets:


Would I have to manually give them IDs, since it's supposed to be a comment section and dynamic

Isn't there a react hook I can use for it

Yes, there is. useId, but it is only in react18
You can also npm install uuid or nanoid

This is from frontend mentor right.
I’ve done the project myself and yeah, it wasn’t easy.
I ran into a similar challenge and what I did to solve it was to create a Reply component.
And to display the replies for a particular comment, I would map the array containing it’s replies returning that Reply component for each reply, while passing each individual reply(object) into the Reply component as it’s prop.
This way all the local states for each reply would be unique to it (like the state that controls if the reply input is showing or not in this case).
Because the problem here is that you have one state controlling all your reply inputs.

This method should also be the same for the comments. A Comment component that all comments in the comments array will be passed into.

Fourpockets:
when i click on the reply button, it affects all the components instead of just one. how can i achieve it to only affect the component i clicked instead of all similar components

note: what im trying to achieve is an interactive comment section

I fixed it, the problem was that I tapped all my components in a usecontext hook and the variable I stored it in was in that hook

Rgade:
This is from frontend mentor right.
I’ve done the project myself and yeah, it wasn’t easy.
I ran into a similar challenge and what I did to solve it was to create a Reply component.
And to display the replies for a particular comment, I would map the array containing it’s replies returning that Reply component for each reply, while passing each individual reply(object) into the Reply component as it’s prop.
This way all the local states for each reply would be unique to it (like the state that controls if the reply input is showing or not in this case).
Because the problem here is that you have one state controlling all your reply inputs.

This method should also be the same for the comments. A Comment component that all comments in the comments array will be passed into.

Yeah, it's from frontend mentor and I've fixed it already
Thanks for the input