/* Code Comments */

Default Prop Values In React

April 05, 2019

What value does a prop get if no value is assigned?

To think about this more tangibly, imagine you have a higher order component, Container. That component does nothing but render a subcomponent, RandomComponent to which it passes a prop, propInQuestion.

(NB: In the code snippets below, I am skipping certain details like import, etc. to zoom in on the pertinent information.)

A couple of things to note:

  1. We never assign propInQuestion a value.
  2. propInQuestion is not an argument that’s passed from wherever Container is being called.
const Container = () => (
    <RandomComopnent propInQuestion />
)

At this point, you might expect propInQuestion to be undefined. I did.

But before we conclude, let’s look at our RandomComponent

class RandomComponent extends Component {

  render () {
    const {propInQuestion} = this.props;
    return (
      <React.Fragment>
      <p>`The value of propInQuestion? --> ${propInQuestion}`</p>
      </React.Fragment>
    )
  }
}

RandomComponent.defaultProps = {
    propInQuestion: false,
};

The first thing I noticed when I came across this pattern was the defaultProps at the bottom. Finally! I had a value assignment! So the answer’s false, right?

Wrong.

It turns out that when a prop is passed around, it defaults to true, mirroring the behavior of HTML. Which is to say, we actually passed along a value for propInQuestion, through the Container, even though it was the first time it was referenced.

So, it turns out Container’s doing more than I initially gave it credit. By passing the prop, propInQuestion, it gave it a value. A more verbose way of writing the same thing would be:

const Container = () => (
    <RandomComopnent propInQuestion={true} />
)

On the other hand, in order to use the defaultProps, it would have needed to be:

const Container = () => (
    <RandomComopnent />
)

The more you know!

H/t to @glanks, @tehpsalmist, and @MinimumViablePerson from CodingBlocks community for pointing me in the right direction!


Stephen Weiss

Written by Stephen Weiss who lives in Chicago with his wife, Kate, and dog, Finn. Follow him on Twitter!