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 ?

This isn't possible by "traditional" means. You have to setup a function that does this check manually. I actually answered a similar question a few months back. I'll link it below. — Chris
– Chris, Commented Feb 10, 2017 at 8:30
Possible duplicate of How to typecheck properties of an object prop in React? — Chris
– Chris, Commented Feb 10, 2017 at 8:30

CodinCat · Accepted Answer · 2017-02-10 08:35:16Z

9

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

answered Feb 10, 2017 at 8:35

CodinCat

16k6 gold badges51 silver badges63 bronze badges

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

4 Comments

Junho Park Over a year ago

It looks type check. is there no way to set a default props in object type?

Junho Park Over a year ago

Code is work. Thanks. but I want to set a default props. Alternatively, I choose the way using state like this, In constructor this.state = { isLoggedIn : (typeof props.sample.isLoggedIn == "undefined") ? false : props.sample.isLoggedIn }

Chris Over a year ago

@CodinCat You can only declare values for implicit props. isLoggedIn isn't a prop but a property of sample. I'm quite sure what you are demonstrating above is not possible. Or can you make a working fiddle?

mayid Over a year ago

That code will only work if you not pass the "sample" prop. But if you pass it like let's say an empty object, skipping the "isLoggedIn" value, then the defaultProp will not be applied. Try it: codepen.io/anon/pen/aVoZLY?editors=1010

Breno Oliveira · Accepted Answer · 2019-09-06 13:54:38Z

2

I think I had the same situation, and solved like below (it doesn't look like the best solution, but it's working):

const defaultSample = {
    isLoggedIn: false,
    isTest: true
}
let { sample = defaultSample } = props; // if doesn't have a sample, it will receive the default, if it does, will just receive the sample past by its parent
sample =  { ...defaultSample, ...sample } // first receive the default properties, than the sample to replace the existed default..

edited Sep 6, 2019 at 13:54

answered Sep 4, 2019 at 1:31

Breno Oliveira

1671 silver badge6 bronze badges

Comments

romehu2 · Accepted Answer · 2022-04-01 19:43:10Z

1

If I had 50 reputation I would have just commented on Breno Oliveira's answer, which I used successfully with slight modifications. Thanks Breno!

function TestComponent(props)
{
    let propsSample = {...props.sampleDefault, ...props.sample};
    const [isLoggedIn,setIsLoggedIn] = useState(propsSample.isLoggedIn);
    ...
}

TestComponent.defaultProps = {
    ...
    sampleDefault: {
        isLoggedIn: false
    }
}

As @mayid says in the comments of @CodinCat's answer, if the 'sample' object is passed into the props then the defaultProp values for sample will not be applied.

answered Apr 1, 2022 at 19:43

romehu2

354 bronze badges

Collectives™ on Stack Overflow

How to set React default props for object type

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related