How to add to a nested array in React?

Question

I am building a Slack clone prototype. When I try to add a message to the array this.state.channels.message, it adds it instead as a new object in the array channels:

DESIRED OUTCOME

class App extends React.Component {
state = {
    channels : [
        { id: 1, name: 'react', messages: ['React message 1', '**DESIRED MESSAGE**']},
        { id: 2, name: 'react-router', messages: ['react-router message 1']},
    ],

CURRENT OUTCOME

class App extends React.Component {
state = {
    channels : [
        { id: 1, name: 'react', messages: ['React message 1']},
        { id: 2, name: 'react-router', messages: ['react-router message 1']},
        { id: 1, messages: '**DESIRED MESSAGE**'}
    ],

LOGIC TO UPDATE COMPONENT STATE

handleSentMessage = (value) => {
    const {selectedChannelId, selectedPersonId, channels} = this.state;

    if(this.state.selectedChannelId) {
      this.setState({
        ...this.state,
          channels: [
            ...this.state.channels,
            this.state.channels[selectedChannelId-1].messages.push(value)
          ]
        }
      );
    }

    if(this.state.selectedPersonId) {
      this.setState({
        ...this.state,
          people: [
            ...this.state.people,
            this.state.people[selectedPersonId-1].messages.push(value)
          ]
        }
      );
    }
}

Any help would be hugely appreciated! Github https://github.com/kingdomwilks/Slack2

Possible duplicate of [Whats the best way to update an object in an array in ReactJS?](https://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs) — Emile Bergeron, Sep 19 '19 at 19:57

score 2 · Answer 1 · answered Sep 19 '19 at 17:34

You're spreading channels incorrectly, cause the second statement will not overwrite anything (it's an array not an object). Use map and only concat messages when the index of channel is equal to selectedChannelId - 1

this.setState(prevState =>({
    channels : prevState.channels.map((channel,i) =>{
        if(i === selectedChannelId -1) return {
            ...channel,
            messages: channel.messages.concat('foo') //Now you overwrite it
        }

        return channel
    })
}))

You could also directly use id to find the correct channel, this way you no longer need to selectedChannelId - 1, just selectedChannelId

How to add to a nested array in React?

1 Answers1