React - Pass prop without a value

Question

I am using NativeBase with React Native.

NativeBase buttons created this way:

    <Button warning>
        <Text>Hello</Text>
    </Button>

Instead of warning you can use different types, such as info or success.

Now, I want to create those buttons based on a prop and trying to do something like this:

<Button {this.props.type}>
    <Text>Hello</Text>
</Button>

But I cannot find a way to do it because this prop does not have a value.

Is it possible to pass props without a value?

This [answer](https://stackoverflow.com/a/29103727/479167) might be helpful — rubish, Sep 07 '19 at 10:03

score 6 · Accepted Answer · edited Sep 23 '21 at 07:45

Component props that can be passed without value are basically boolean props and are resolved as true.

These two are equal:

<Button primary />
<Button primary={true} />

Considering above, you can make use of spread attribute syntax:

<Button {...{ [this.props.type]: true }}>
    <Text>Hello</Text>
</Button>

EDIT (detailed explanation):

Let's say your this.props.type is "success", Button element would resolve to this (because of usage of dynamic property name):

<Button {...{ success: true }}>

Now when you destruct object (these three dots), you'll get all of its properties and corresponding values as element's props:

<Button success={true} >

As I've already mentioned, please take a look at this explanation.

Thank you, it works. Could you please explain why it works? I am not sure I fully understand this. — boygs, Sep 07 '19 at 09:58

1 Answers1