Transitioning from my experience with React, I initially believed that passing props worked the same way, but it turns out that's not the case?
Currently, I am working on a login form where I want to differentiate between the styling of the sign in and sign up buttons.
Within my login form component, I have implemented the following method:
renderButton (type, text) {
if (this.state.loading) {
return <Spinner size="small" />;
}
let btnColors = {
bgColor: colors.whiteText,
textColor: colors.primaryTeal
};
if (type === "signUp") {
btnColors.bgColor = colors.whiteText;
btnColors.textColor = colors.primaryTeal;
} else if (type === "logIn") {
btnColors.bgColor = colors.darkTeal;
btnColors.textColor = colors.whiteText;
}
return (
<Button colors={btnColors} onPress={this.onButtonPress.bind(this)}>
{text}
</Button>
);
}
Called in the Render method like this:
{this.renderButton("signUp", "SIGN UP")}
The Button component's code is as follows:
import React from 'react';
import { Text, TouchableOpacity, View, StyleSheet} from 'react-native';
const Button = ({colors, onPress, children }) => {
const styles = StyleSheet.create({
textStyle: {
alignSelf: 'center',
color: colors.textColor,
fontSize: 16,
fontWeight: '900',
paddingTop: 10,
paddingBottom: 10,
},
buttonStyle: {
flex: 1,
backgroundColor: colors.bgColor,
borderRadius: 50
},
});
return (
<TouchableOpacity onPress={onPress} style={styles.buttonStyle}>
<Text style={styles.textStyle}>
{children}
</Text>
</TouchableOpacity>
);
};
export { Button };
The encountered error is:
undefined is not an object (evaluating 'colors.textColor')Why is it not working, and what is the correct way to conditionally pass props as an object for styling purposes?