How would you reference an array with objects in state to perform array methods on it?

Question

I'm having problems trying to delete one reply in my comment app project. The onClick function for the delete button for my reply keeps deleting the entire comment instead of just 'one' replies iterations that is in the reply array in state. It has to deal with how I'm referencing the state of the array of replies that I have. I'm not sure how to reference the state of the array due to my state.

I've already tried to reference state as a variable that will then reference the array in state.

//State for component
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      commentArray: [
        {
          message: "Hello",
          showReply: false,
          reply: [
            { replies: "Hi there." },
          ],
          id: 1
        }]
       }

//Function to splice one reply
handleRemoveReply = (index) => {
    let replyArray = this.state.commentArray.reply
    this.setState({
      reply: replyArray.splice(index, 1)
    })
  }
}

I'm expecting only one reply to delete, not the entire comment. With the things that I tried, I'm only able to delete the entire comment it seems. It keeps saying that the state is undefined, so it is a reference problem.

Is the state actually undefined or is replyArray undefined? According to your code, you're trying to grab a reply property of the array, commentArray. Also how are you passing handleRemoveReply to your component? — koralarts
– koralarts, Commented Aug 19, 2019 at 23:39
From what I tried out, I found out that it kept reading the reply arrary property as undefined and it wouldn't compile my app. I tried without referencing the reply array property to see if it would work with just commentArrary. It did work out, but it ended up deleting the entire comment instead of just one reply. — user11948525
– user11948525, Commented Aug 19, 2019 at 23:43
replyArray will always be undefined with the way you're initializing it since you're grabbing the property from an array and those don't have a reply property. — koralarts
– koralarts, Commented Aug 19, 2019 at 23:48
What would be a solution to go around the issue of replyArray being undefined? — user11948525
– user11948525, Commented Aug 19, 2019 at 23:51
you arent setting state correctly. you have an array of items. this.state.commentArray.reply is invalid. you need to pass the comment id to this handler function. then const idx = this.state.commentArray.findIndex( comment => comment.id === id) with that index you can properly reference the correct comment. let replyArray = this.state.commentArray[idx].reply — John Ruddell
– John Ruddell, Commented Aug 20, 2019 at 0:01

John Ruddell · Accepted Answer · 2019-08-20 01:11:49Z

1

As far as I can tell your not actually interacting with the state correctly for your state data structure. You must first get the replyArray for the given comment, and then you need to set the state back to the origonal data structure. Also to note is that splice performs the splice operation on the array however returns the object removed. Hence unless you want to set the state to what was removed you want to first splice the array and then set the state to the new result.

//Function to splice one reply
handleRemoveReply = (index) => {
    let replyArray = this.state.commentArray.reply
    this.setState({
      reply: replyArray.splice(index, 1)
    })
  }
}

Try this:

// Also pass what comment index you are interacting with
handleRemoveReply = (commentIndex, index) => {
    const commentArray = [...this.state.commentArray]
    commentArray[commentIndex].reply.splice(index, 1)

    this.setState({
      commentArray
    })
  }
}

Edit: updated to copy state instead of directly mutate it

edited Aug 20, 2019 at 1:11

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

answered Aug 20, 2019 at 0:28

Jamie Shepherd

1,1699 silver badges15 bronze badges

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

8 Comments

John Ruddell Over a year ago

you are mutating state here. This is excessively dangerous. Instead make a copy of your state objects before applying methods / assignments that will mutate it.

John Ruddell Over a year ago

or just the extend notation ... :)

Jamie Shepherd Over a year ago

I mean ideally would be using the useReducer hook haha

John Ruddell Over a year ago

haha, im not a huge fan of hooks :P but thats a long story. You had bugs in your code with object assign. You weren't using it correctly, I just updated to clean it up a bit :)

Jamie Shepherd Over a year ago

Ahh thanks, I don't tend to use it too often. I had considered putting it into one line but didn't know if that would be too dense. Is the commentArray being a "const" not going to be annoyed when you splice it? Otherwise looks great

|

Collectives™ on Stack Overflow

How would you reference an array with objects in state to perform array methods on it?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related