Set default values for missing properties in ReactJS

Question

Assume a component receives a nested property in React from its parent :

getDefaultProps: function(){
    return ({
        "data" : {
            "style": {
                pieChart: true, // otherwise it'd be a donut chart
                radius: 100
            },
            "series": {
                "data": []
            }
        }
    });
},

It's possible to receive a property with some missing values (e.g we may receive series but not style , or we may receive a value for radius but not for pieChart)

How can we define default values only for the missing values ? and keep the rest of values as they are received

Ganonside · Accepted Answer · 2015-01-29 20:15:11Z

you can't set the default values for deep objects in the getDefaultProps method but you can inside the componentWillMount method.

React.createClass({
  getDefaultProps() {
    return {
      "data" : {
        "style": {
          pieChart: true, // otherwise it'd be a donut chart
          radius: 100
        },
        "series": {
          "data": []
        }
      }
    }
  },

  componentWillMount() {
    if(!this.props.data.style) {
      this.props.data.style = {
        pieChart: true,
        radius: 100
      };
    }
    if(!this.props.data.series) {
      this.props.data.series = {
        data: []
      };
    }
  }
});

however this is not recommended as React best practices state that you shouldn't modify this.props from within the component. What you really should do is use the logic in componentWillMount to format the object to your liking before you pass it into the component.

raorao · Accepted Answer · 2015-01-28 20:27:15Z

0

Props are meant to be overwritten. You can use the componentWillReceiveProps function to handle any negotiation between the old props and the new props, but you will have to write out the logic yourself. Not totally sure of what you're data structure looks like, but I'm sure you could do the job with underscore's _.extend and _.defaults.

answered Jan 28, 2015 at 20:27

raorao

1562 silver badges9 bronze badges

2 Comments

Arian Over a year ago

The problem is "componentWillReceiveProps" is not called for the initial render .

raorao Over a year ago

will you have variable data even for the initial render? if not, getDefaultProps will do the job then, and componentWillReceiveProps will do the job subsequently. if the data is variable, you can simply transform props in the render method. duplicating logic like that is fairly common, IMO. In my company's flux stack, we often do similar and sometimes identical things for getInitialState and for when the store changes.

Collectives™ on Stack Overflow

Set default values for missing properties in ReactJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related