/* 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

Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!