React-Redux access props inside a nested object within component

Question

I have a react-redux application and I am able to receive props inside a component.

This is my componentDidMount() function

componentDidMount() {
        this.graphdata = {

            dnsCountPlot: {
                data: [{
                    type: 'scatter',  
                    x: this.props.dnsCountPlot.x,
                    y: this.props.dnsCountPlot.y,
                    fill: 'tozeroy',
                    marker: {
                        color: 'rgb(99, 128, 185)'
                    }
                }],
                layout: {
                    title: '',
                    xaxis: {
                        title: 'time'
                    },
                    autosize: true

                },
                config: {
                    showLink: false,
                    displayModeBar: true
                }
            }

        };
}

The this.props.dnsCountPlot.x variable is updated every 10 sec and when I print the variable it shows that.

However the this.graphdata variable which contains the this.props.dnsCountPlot.x variable is not being updated. Any idea if this is possible and how to do it?

   componentDidUpdate() {

        console.log(this.props.dnsCountPlot.x); //Successfully Updated
        console.log(this.graphdata);            // Doesnt reflect changes of this.props.dnsCountPlot.x   

    }

the index.js file

const initialState = {
    dnsCountPlot : {
        x: [],
        y: []
    }
};
const store = createStore(reducers(initialState));

const history = createBrowserHistory();

startSocket(store);

ReactDOM.render((
    <Provider store={store}>
        <HashRouter history={history}>
            <Switch>
                <Route path="/" name="Home" component={Full}/>
            </Switch>
        </HashRouter>
    </Provider>
), document.getElementById('root'));

Thanks.

You should use componentWillReceiveProps to get the new props. Take a look at component lifecycle — bennygenel
– bennygenel, Commented Sep 22, 2017 at 18:13
you're missing a 'data' array with a 0th element for the x,y in your initial state in your redux store as well — Eric Hodonsky
– Eric Hodonsky, Commented Sep 22, 2017 at 19:28

Eric Hodonsky · Accepted Answer · 2017-10-23 17:37:10Z

1

You should set your initial state to have those props, then use the componentWillReceiveProps lifecycle method to update the state with this.setState( {...} ) which will redraw the component. Example:

constructor( props ){
    super();
    this.state = { ...props };
}
componentWillReceiveProps( nextProps ){
    this.setState( { ...nextProps } );
}
render(){
   <span>this.state.dnsCountPlot.x</span>
}

Or if you want:

constructor( props ){
    super();
    this.state = {
       graphData: {
         dnsCountPlot: {
            data: [{
                type: 'scatter',  
                x: this.props.dnsCountPlot.x,
                y: this.props.dnsCountPlot.y,
                fill: 'tozeroy',
                marker: {
                    color: 'rgb(99, 128, 185)'
                }
            }],
            layout: {
                title: '',
                xaxis: {
                    title: 'time'
                },
                autosize: true

            },
            config: {
                showLink: false,
                displayModeBar: true
            }
        }
      }
    };
}
componentWillReceiveProps( nextProps ){
    this.setState( { graphData: {
      ...this.state.graphData
      dnsCountPlot:{
        ...this.state.graphData.dnsCountPlot,
        data:[{
          ...this.state.graphData.dnsCountPlot.data[ 0 ],
          x: nextProps.dnsCountPlot.x,
          y: nextProps.dnsCountPlot.y,
        }] } } } );
}
render(){
   <span>this.state.graphData.dnsCountPlot.data[ 0 ].x</span>
}

---UPDATE---

It has been argued that setting the state with the props initially is an anti-pattern to React. And it even says so in the docs... HOWEVER, this stops being true if you complete this anti-pattern with an acceptable pattern of updating the state when those properties are updated on the component as done here in the componentWillReceiveProps lifecycle method.

edited Oct 23, 2017 at 17:37

answered Sep 22, 2017 at 18:28

Eric Hodonsky

5,9974 gold badges28 silver badges36 bronze badges

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

6 Comments

Salmaan P Over a year ago

I am using redux, so there isn't a state but a store

Eric Hodonsky Over a year ago

React components always have a state. Don't down vote until you're sure my dude.

Eric Hodonsky Over a year ago

You hook the component to the store with connect, and it effects the props. True. But also the components all have a state and the component relies on to update it's view properly. Do a little more digging you'll see what I'm talking about.

Eric Hodonsky Over a year ago

You can also use this.state in any of the lifecycle or this methods

Salmaan P Over a year ago

This works, I was under the assumption that the store replaces the state entirely. Thanks for the detailed answer..

|

Collectives™ on Stack Overflow

React-Redux access props inside a nested object within component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related