How to append JSON object to existing JSON object in JS file in react.js

Question

I am trying to make a Todo app using React.js.

I took todo data from an in-app js file as a JSON object. I want to add more todo in my list which I want to store in that js file as a JSON object.

I want to append another JSON object with existing. How can I do it?

TodoList.js file

const TodoList=
   [

    {
      "id": 1,
      "title": "Learn backbone",
      "complete": false,
      "canceled": false,
      "date": new Date().getTime()
    },

    {
      "id": 2,
      "title": "Go for a run",
      "complete": false,
      "canceled": false,
      "date": new Date().getTime()
    }
  ]

  export default TodoList;

New TodoList.js file should be like this:

const TodoList=
[

    {
      "id": 1,
      "title": "Learn backbone",
      "complete": false,
      "canceled": false,
      "date": new Date().getTime()
    },

    {
      "id": 2,
      "title": "Go for a run",
      "complete": false,
      "canceled": false,
      "date": new Date().getTime()
    },

    {
      "id": 3,
      "title": "Have Lunch",
      "complete": true,
      "canceled": false,
      "date": new Date().getTime() 
    }
  ]

  export default TodoList

Your TodoList const is an array. You can either use spread operator or use TodoList.push(newTodo). This is more of a Javascript question than a react tho. — Atin Singh
– Atin Singh, Commented Sep 22, 2019 at 10:48

Gilad Bar · Accepted Answer · 2019-09-22 10:46:49Z

8

This has nothing to do with React, this is plain object/array manipulation in Javascript. If you want to take an existing array and add a new element, simply have:

const newToDoList = [...toDoList, {"id": 3, ...}]

You spread the previous array and create a new one with a new element.

answered Sep 22, 2019 at 10:46

Gilad Bar

1,3428 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

How to append JSON object to existing JSON object in JS file in react.js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related