Pass property to component

Question

I have simple footerTab where I would like to show badge if there is notifications.

<Button active={ this.props.ui.selectedTab === 'notifications' ? true : false } 
        onPress={ () => this.selectedTab('notifications') }
        { ...this.props.ui.notifications ? badge : null }    
>
        { this.props.ui.notifications ? 
          <Badge><Text style={{ color:'white' }}>{this.props.ui.notifications}</Text></Badge> : null
        }
        <Icon name='md-notifications' />
</Button>

With this code I'm getting 'badge is not defined'

How I can pass that badge property for Button ?

Hmm. Good question. I haven't defined it anywhere because I have thought that is just property for component . Should I pass that property as string to component ? — CodAri, Mar 31 '17 at 13:03
Are you using a library for Badge component? Or did you create a Badge component yourself? — Taylor King, Mar 31 '17 at 13:08
Button, Footer and badge property for Button, all are from native-base library. — CodAri, Mar 31 '17 at 14:37
Is badge a prop of Button? If so you probably want to change that to `badge={!!this.props.ui.notifications.length}`, I'm assuming you want this badge to show if there are notifications. If there is no badge property for Button then this will not work. — Matt Aft, Mar 31 '17 at 15:07

score 0 · Answer 1 · answered Mar 31 '17 at 17:33

After a while I realised that property badge was boolean with default true. So working version was like this.

    <Button active={ this.props.ui.selectedTab === 'notifications' ? true : false } 
        onPress={ () => this.selectedTab('notifications') }
        badge={ this.props.ui.notifications ? true : false }    
    >
        { this.props.ui.notifications ? 
          <Badge><Text style={{ color:'white' }}>
       {this.props.ui.notifications}</Text></Badge> : null
        }
        <Icon name='md-notifications' />
    </Button>

Pass property to component

1 Answers1