How to update state of component with some data which is coming from reducer

Question

Lets say I have a subcategoryContainer.js which is passing props to subcategory.js now there is another component filter.js imported in subcategory.js. This filter.js is receiving props from subcategory.js. Data is coming from store. Here redux thunk is updating store asynchronously.

Now the problem is in putting props to state of filter.js. Initialy state is set to empty object. Even if I update state in componentWillReceiveProps method, I only get empty object in render() instead of updated state which should have data of props in it.

This is the order of methods fired.

1.render() // initial data from redux reducer//
2.componentWillReceiveProps()
3.render() // new data by redux thunk

Here at point 3 it seems componentWillReceiveProps() should also trigger but it is not.

How can I update filter.js state with newly received props (props->updated by thunk)

How should I do this. Please assist.

Answer 1

Are you sure that componentWillReceiveProps is actually triggered? It triggers only when props actually change, not when the component is mounted initially and the props don't change. You probably don't want to initialize state to an empty state, but to something based on props already.