React.Component.defaultProps objects are overridden, not merged?

Question

I'm trying to set a defaultProp with an object literal, but after some time I realized that the React class constructor is not merging the default props with the applied props, so I end up with undefined values for any properties in the defaultProps literal that haven't been included in the applied props. Is there a way to merge default props and applied props, or do I need to break up my object into several props?

class Test extends React.Component {
  constructor(props) {
    super(props);

    //props.test is only {one: false}
    //props.test.two is undefined

  }
  render() {
    return (<div>render</div>)
  }
}

Test.defaultProps = {
  test:  {
    one: true,
    two: true
  }
}


ReactDOM.render(<Test test={{'one': false}}/>, document.getElementById('#test'));

http://codepen.io/adjavaherian/pen/oYNPLz

TimoStaudinger · Accepted Answer · 2016-11-04 17:53:57Z

13

React only does a shallow merge of the default props and the actual props, i.e. nested default props are overridden instead of merged. This is by design.

See this React issue for more background and reasoning why this is the case and potential workarounds:

aside from the potential perf issues here. one issue with this is how do you handle nested complex structures like arrays? concatenation? Union? what about an array of objects? deep object merging can lead to unexpected behaviour, which is why often implementations allow you to specify a merge strategy such as _. merge. I'm not sure how you would do that in prop type declaration.

edited Nov 4, 2016 at 17:53

answered Nov 4, 2016 at 17:50

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

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

2 Comments

user5307109 Over a year ago

How the assignment actually happens: github.com/facebook/react/blob/master/src/isomorphic/classic/…

4m1r Over a year ago

ya, makes sense. thanks for the clarification and the link.

Alireza Kavian · Accepted Answer · 2020-10-07 12:07:08Z

This is kind of late to answer but I couldn't find any official or better ways to assign default props that way so that the props would be merged with the defaults!

I did it in my own way as shown below:

Define a defaultProps variable before the rendering function or class
Use

const var = Object.assign({}, defaultProps.var , props.var);

to get the props object var merged with the default variable var.

Of course, you should do a little more coding for nested objects and arrays to make this approach go well! the assign function is for shallow merging.

The best approach is using _.merge function of *loadash library.

Assign App.propTypes and App.defaultProps

The complete example

import React from 'react';
import PropTypes from 'prop-types';

const defaultProps = {
  user: {
    id: 0,
    name: 'Mike',
    family: 'wheeler',
  },
  address: {
    addr1: 'Saint Louis, Arsenal Street',
    addr2: '',
    tel: null,
  },
  color: 'orange',
  weight: 60,
  age: 20,
};

.
.
.

export default function App(props){
  const {color, weight, age} = props;
  const user = Object.assign({}, defaultProps.user , props.user);
  const address = Object.assign({}, defaultProps.address, props.address);

  return (<div></div>);
}

App.propTypes = {
  type: PropTypes.string.isRequired,
  user: PropTypes.shape({
    id: PropTypes.number,
    name: PropTypes.string,
    family: PropTypes.string,
  }),
  address: PropTypes.shape({
    addr1: PropTypes.string,
    addr2: PropTypes.string,
    tel: PropTypes.string,
  }),
  color: PropTypes.string,
  weight: PropTypes.number,
  age: PropTypes.number,
};

App.defaultProps = defaultProps;

Collectives™ on Stack Overflow

React.Component.defaultProps objects are overridden, not merged?

2 Answers 2

2 Comments

The complete example

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

The complete example

Comments

Your Answer

Sign up or log in

Post as a guest

Related