what is the best way to implement conditional props, i having something like this, a component that would be a view or a button that base on a props, which i call here CountdownButtonI
It look like this
class CountDownButton extends Component<CountdownButtonI> { constructor(props:CountdownButtonI) { super(props); } render() { const { t, title, onPress, time } = this.props; return time ? (<View style={{ ...Layout.flexView }}><Label text={t('common.countdown.otpCountdown')} style={{ ...LabelStyle.SubBodyText, color: Colors.black }} /><Label text={moment.utc(time * 1000).format('HH:mm:ss')} style={{ ...LabelStyle.SubBodyTextMedium, fontWeight: '500', color: Colors.black }} /></View> ) : (<TouchableOpacity activeOpacity={1} style={styles.buttonContainer} onPress={onPress}><Label text={title} style={{ ...LabelStyle.BodyTextMedium, color: Colors.white }} /></TouchableOpacity> ); }}
For CountdownButtonI i set like this
interface CountdownButtonI{ t: any; title: any; time: any;}
But i feel it not optimal at all, like, when i have time
props, onPress
still visible, how can i avoid this, like, if i have time
props, the onPress
will raise an error