React - Adding a property to an object inside of array in component's state

Question

I am fetching an array of objects in the state, and I am trying to add a property to each of these objects.
The problem is I can see my property being added to each of the objects but when I mapping through all these objects and trying to console.log it I'm getting undefined

Adding a property

addFavourites() {
        let data = this.state.data.map((e) => {
            e.favourite = false;
            return e;
        });
        return data;
    }

state = {
        data: []
    }

addFavourites's called here:

getItem = () => {
        this.service
            .mergeData()
            .then((body) => {
                this.setState({
                    data: body
                },
                () => {
                    this.addFavourites();
                },
                () => {
                    this.dataToFilter();
                });
            });
    }

    componentDidMount(){
        this.getItem();
    }

In render function I see all my objects including favourite

console.log(data.map((e) => e));

But this gives an array of undefined

console.log(data.map((e) => e.favourite));

How can I solve this?

Would you provide more code how addFavorite is called, when the state is saved, and where you are logging? — dance2die
– dance2die, Commented Aug 5, 2019 at 16:01
You call this.addFavourites(); but returned data from addFavourites() never get stored in any variable ? — Flo
– Flo, Commented Aug 5, 2019 at 16:06

Gershon Papi · Accepted Answer · 2019-08-05 16:11:27Z

5

First, welcome! You should have probably made it more clear that this question is about React.

Now to the answer, every state modification would be made using setState, so your addFavourites function should be like this:

addFavourites() {
    let data = this.state.data.map((e) => {
        e.favourite = false;
        return e;
    });
    this.setState({ data: data });
}

answered Aug 5, 2019 at 16:11

Gershon Papi

5,1263 gold badges28 silver badges51 bronze badges

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

2 Comments

Stan Over a year ago

Yeah. I get know, forgot to store this to the state. Thank you.

Gershon Papi Over a year ago

No problem. You should mark the answer if it answered your question.

Collectives™ on Stack Overflow

React - Adding a property to an object inside of array in component's state

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related