How to set React default props for object type

Question

We already know, how to set a defaultProps.

TestComponent.defaultProps = {
    isTest: true
};

But I often used props as object type.

In Parent,

render(){
    let sample = {
        isTest : true,
        isLoggedIn : true
    }
    return (
        <div>
            <TestComponent sample = {sample} />
        </div>
    )
}

In child component, I want to set isLoggedIn to false as default. If not set (or not passed from Parent) isLoggedIn, default value is true

But I don't know how to set defaultProps for object type

TestComponent.defaultProps = {
    sample : {
        isLoggedIn: false
    }
};

How to do this ?

Answer 1

Your code

TestComponent.defaultProps = {
  sample : {
    isLoggedIn: false
  }
};

should work.

And for type validation (propTypes), use React.PropTypes.shape for nested object props like this:

React.PropTypes.shape({
  isLoggedIn: React.PropTypes.bool
})

See the document: https://facebook.github.io/react/docs/typechecking-with-proptypes.html#react.proptypes