<ComponentB from="3/1/2016" to="12/1/2016" />

and in ponentB's constructor I can do

const { from, to } = this.props but my from to value is optional. I can't do

this.state = { from, to } if they are or null. Any way to set default value for destruction?

I can do if(from && to) {} but just curious what's the best way to handle optional props in react.

<ComponentB from="3/1/2016" to="12/1/2016" />

and in ponentB's constructor I can do

const { from, to } = this.props but my from to value is optional. I can't do

this.state = { from, to } if they are or null. Any way to set default value for destruction?

I can do if(from && to) {} but just curious what's the best way to handle optional props in react.

• javascript
• reactjs

3 Answers 3

You can use any of these two ways:

1. Assign the default values to variable during the destructuring, like this:

const { from = 'abc', to ='abc' } = this.props;

If this.props doesn't contains any key it will take the default value 'abc'.

2. Use defaultProps to assign the default values to props variable, like this:

ComponentName.defaultProps = {
    from: 'abc',
    to: 'abc'
};

All the props passed from parent ponent will be assigned these default values.

Check this example:

var obj = {a: 1, b: 2, c: 3};

var {a=5, b=5, d=5} = obj;

console.log(a, b, d);

Use default props to set default values to 'to' and 'from' variables.

Component.defaultProps = {
	from: "28/12/1992",
	to: "28/12/1992"
};

Consider Using typechecking and defaultProps to set up the defaults for the props you are expecting see the docs here. https://facebook.github.io/react/docs/typechecking-with-proptypes.html

In your case you could define.

//declare default Props expected by app
ComponentB.propTypes =  {
 from: PropTypes.string,
 to: PropTypes.string.isRequired
};

//set our default values
ComponentB.defaultProps = {
 to:"0/0/0"
 from:"0/0/0" 
};

Consider here I used string and I declared that the to prop is required but the from doesn't have the isRequired flag. NB I used string here but there is numerous other types you can use.