Function generating data according to state value not changing after first render

Question

I am creating a Login and Register screen and I want the use to have an option to choose to register with email or phone number.

I am using a radio button for this, and for some reason the function does not change its render when I change the state(the state is for sure changed, I checked it with console.log).

Code:

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            //login
            email: "",
            password: "",

            //register
            firstName: "",
            lastName: "",
            date: new Date(),

            checked: "Use Email Address",
            ...

        }
    }

    componentDidMount() {
        ...
        Register = Register.bind(this);
        RadioButton = RadioButton.bind(this);
    }
    onRadioChange(label) {
        if (label === "Use Email Address") {
            this.setState({ checked: "Use Email Address"})
            console.log('test2')
        } else {
            this.setState({ checked: "Use Phone Number" })
            console.log('test')
            console.log(this.state.checked)
        }
    }

    render() {
        return (
            <Stack.Navigator initialRouteName="Login">
                <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
                <Stack.Screen name="Register" component={Register} options={{ headerShown: false }} />

            </Stack.Navigator>
        )
    }
}

function RadioButton(label) {
    return (
        <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5, marginBottom: 5 }}>
            <TouchableOpacity
                onPress={() => { this.onRadioChange(label) }}
                style={{
                    height: 24,
                    width: 24,
                    borderRadius: 12,
                    borderWidth: 2,
                    borderColor: '#FF9C09',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                {
                    this.state.checked === label ?
                        <View style={{
                            height: 10,
                            width: 10,
                            borderRadius: 5,
                            backgroundColor: '#FF9C09',
                        }} />
                        : null
                }
            </TouchableOpacity>
            <Text style={{ marginLeft: 10, fontFamily: 'open-sans-regular' }}>{label}</Text>
        </View>
    );
}
function Register({navigation}) {
    ...
    return(
     ...
    {RadioButton("Use Email Address")}
    {RadioButton("Use Phone Number")}
    ...
   )
}

I guess this has something to do with the lifecycles? I mean I am updating the state and I binded this with function RadioButton.

Note: When it's first loaded it shows "Use Email Address" as checked correctly. It just does not change when I check "Use Phone Number".

Any help would be very much appreciated.

Function generating data according to state value not changing after first render

0 Answers0