DEV Community

Stephen Charles Weiss
Stephen Charles Weiss

Posted on • Originally published at stephencharlesweiss.com on

3 4

Default Prop Values In React

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!

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay