adding new object inside of array of objects in react

Question

I am having a little problem when trying to add a new object to an array of objects which is stored in state.

Below is a example of the object which is stored in state (scratchTickers):

id : uuid.v1(),
area     : 'Scratch',
name     : 'Untitled',
status   : "",
size     : "",
created  : {
 name : "username",
 time : new Date()
},
modified : {
 name : "username",
 time : new Date()
},
content: [{
 content: "Dummy content",
 TowerRed: "",
 TowerText: "Headlines"
}]

I need to dynamically add new objects in the content array, an object is structured like this:

{
 content: "Dummy content",
 TowerRed: "",
 TowerText: "Headlines"
}

I am trying to use React's immutability helpers to accomplish this but It doesn't seem to be working as it should.

here is my function to add a new object to the content array and update the state:

_createTickerItem: function (id) {
        var tickerID = id;
        var key      = null;

        for (var i = 0; i < this.state.scratchTickers.length; i++) {

            if(this.state.scratchTickers[i].id == tickerID) {
                var ticker = this.state.scratchTickers[i];
                var key    = i;
            }
        }

        var blankContent = ({
                content: "Ticker Content",
                TowerRed: "",
                TowerText: "Headlines"
            });

        var oldContent = this.state.scratchTickers[key];

        var newContent = update(oldContent, {
            content : {
                $push : [blankContent]
            }
        });

        this.setState({
            scratchTickers: newContent
        });

    },

So when i clicl the button tun run the _createTickerItem function the component re-renders and the main object has disappeared entirely.

Edit* Ok so I am now 1 step further making sure to set 'newContent' as an array during set state now adds new objects to the content array and renders them correctly.

this.setState({
        scratchTickers: [newContent]
    });

However if there were multiple objects in state, this will replace them all with juts a single object. So how would it work if I had say to parent objects in state but wanted to just modify the content array of object 1?

Edit 2: i should add that scratchTickers is an array of objects, so the for loop is needed to make sure i modify the correct object.

Looks like you are replacing scratchTickers entirely with the newContent. You should set the new content in the content key, and re-set scratchTickers. Makes sense? — ezakto
– ezakto, Commented Feb 15, 2016 at 13:31
I think have just come across what you have said, please see my update. I t is now partially working, but If there were multiple parent objects i am now replacing them all with the single updated object. — chinds
– chinds, Commented Feb 15, 2016 at 13:33
btw, I don't get the idea of the for loop. scratchTickers is an object, so it doesn't have a .length property. — ezakto
– ezakto, Commented Feb 15, 2016 at 13:45
scrarchTickers is an array of objects. so i can have multiple scratchTicker objects inside of the array with content objects inside — chinds
– chinds, Commented Feb 15, 2016 at 13:48

ezakto · Accepted Answer · 2016-02-15 13:56:17Z

2

You're replacing the entire scratchTickers array with only the last updated object.

You have to update the entire array first.

var updates = {};
updates[key] = { $set: newContent }

var newScratchTickers = update(this.state.scratchTickers, updates);

this.setState({
    scratchTickers: newScratchTickers
});

edited Feb 15, 2016 at 13:56

answered Feb 15, 2016 at 13:43

ezakto

3,20424 silver badges27 bronze badges

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

3 Comments

chinds Over a year ago

this doesn't work as I need the key element to make sure I am modifying the correct object as there could be multiple objects with the scratchTickers array.

ezakto Over a year ago

@chinds sorry, I misunderstood your post. Just edited the answer, take a look!

chinds Over a year ago

not a problem, i think i could have worded it better. And your solution is working perfectly. I got so close before hand :) Thanks Again.

Collectives™ on Stack Overflow

adding new object inside of array of objects in react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related