React object property in state reference on another object in state

Question

I am new to react and I want to archieve this. I have grid in my page where it displays some data from array. I want to have defined multiple objects in my state as it is shown below.

Properties take and skip in query has to be set by pagingOptions

Property filter in query has to be set by filter object

Right now it throws me an error: Uncaught TypeError: Cannot read property 'filter' of undefined

How can I set those properties to their values?

My component with those states looks like this:

this.state = {
        // filter for my grid view
        filter: {   
            id: 1,
            status: ""
            etc....
        },
        // paging options for grid 
        pagingOptions:{
            pageSize: 5,
            skip: 0
        },
        //this represents query which is send to my api
        query:{
            collectionName: "",
            filter: this.state.filter // here it throws an error: Cannot read property 'filter' of undefined
            sort: {},
            projection: {},
            take: this.state.pagingOptions.pageSize, // it will throw error also here since its same approach as filter
            skip: this.state.pagingOptions.skip // it will throw error also here since its same approach as filter
            includeTotalCount: true,
            context: null,
        }
    };

based on @James provided , Please find here https://codesandbox.io/s/w7yvmpwp5w — RIYAJ KHAN, May 21 '18 at 08:53

score 1 · Accepted Answer · answered May 21 '18 at 08:45

You are attempting to reference a property of this.state before this.state has a value (it's undefined, hence the error message you mentioned).

To work around this you could add the query property to the state object after you've defined it:

this.state = {
  // ...
};

this.state.query = {
  // ...
};

React object property in state reference on another object in state

1 Answers1