Updating an object in nested arrays and objects. object --> array -->object--> array--> "object"

Question

If I have an object todo as part of your state, and that object contains arraylists, inside the lists there are objects, and inside these objects another arraylistItems. How do you update an object inside the array listItems with id:" poi098 "?

Demo here: https://stackblitz.com/edit/react-fjyb9g

class App extends Component {
  constructor() {
    super();
    this.state = {
      todo: {
        id: "abc123",
        name: "AAA",
        lists: [
          {
            id: "def456", 
            desc: "description",
            listItems: [
              {
                id: "ghj678", 
                title: "title1",
                listItemsId: "88abf1"
              },
              {
                id: "poi098", 
                title: "title2",
                listItemsId: "2a49f25"
              }
            ]   
          },
          {
            id: "zxc456", 
            desc: "description3",
            listItems: [
              {
                id: "qyu678", 
                title: "title3",
                listItemsId: "h60bf1"
              },
              {
                id: "p8l098", 
                title: "title4",
                listItemsId: "6yuf25"
              }
            ]   
          }
        ]  
      }
    }
  }

  addNew = () => {
      const data = {
              id: "poi098", 
              title: "title23333333333",
              listItemsId: "2a49f25"
            }

      const todoCheck = this.state.todo['lists'].filter(obj => obj.id ===  "zxc456")

      const todoCheckList = todoCheck.map((obj, i) => obj['listItems'])[0]

    this.setState(prevState => ({
    ...prevState,
    todo: {
        ...prevState.todo,
        lists: {
            ...prevState.todo.lists, 
            listItems: {
               ...prevState.todo.lists.listItems,
               listItems: todoCheckList
            }
        }
    }
}))
  }

  render() {
    console.log(this.state.todo)
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          <button onClick={this.addNew}>Button</button>
        </p>
      </div>
    );
  }
}

ravibagul91 · Accepted Answer · 2019-09-19 02:49:01Z

2

You can update your nested array as,

this.setState(prevState => ({
   ...prevState,
   todo: {
      ...prevState.todo,
      lists: prevState.todo.lists.map( list => ({ 
        ...list,
        listItems: list.listItems.map( listItem => listItem.id === data.id ? data : listItem )
      }))
   }
}))

Demo

answered Sep 19, 2019 at 2:49

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

Comments

antoinestv · Accepted Answer · 2019-09-18 22:05:50Z

0

I would recommand you to read the following article: https://reactjs.org/docs/update.html

import update from 'react-addons-update';

const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

answered Sep 18, 2019 at 22:05

antoinestv

3,3062 gold badges25 silver badges39 bronze badges

Collectives™ on Stack Overflow

Updating an object in nested arrays and objects. object --> array -->object--> array--> "object"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related