React not rendering value in JSX

Question

I am making an app on React-native and I have code for my screen which looks like this

const flow_array = ['name', 'age', 'gender', 'interested_gender', 'photos']

class UserInfoInitial extends PureComponent {
state = {
    toView: flow_array[0]
}

render() {

    const {toView} = this.state
    let currentlyViewing = null

    switch (toView) {
        case 'name':
            currentlyViewing = (
                <View style={styles.subJuniorClass}>
                    <Text> Hello Name </Text>
                </View>
            )
        case 'age': 
                currentlyViewing = (
                    <View> 
                        <Text> Hello Age </Text>
                    </View>
                )
        case 'gender': 
                currentlyViewing = (
                    <View> 
                            <Text> Gender </Text>
                    </View>
                )
        case 'interested_gender': 
                currentlyViewing = (
                    <View> 
                        <Text> Interested Gender</Text>
                    </View>
                )
        case 'photos':
                currentlyViewing = (
                    <View> 
                        <Text> Photos </Text>
                    </View>
                )
        default:
                currentlyViewing = null
    }
    return ( 
        <View>
           <View style={styles.subJuniorClass}>
               <Text> Hello Name </Text>
             </View>
            {currentlyViewing}
        </View>
    )
    }
}

export default UserInfoInitial

Now, the above code isn't displaying, the code from current displaying, rather it is only displaying hello name that too once. Can someone help me in figuring out what could I be doing wrong?

Answer 1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

You should add break statements to your case blocks. What's happening is that it is falling through to the default block of your switch and assigning currentlyViewing back to null

Answer 2

I think the problem is your switch case statement. It always returns null as default, correct it by adding break in every case statement, like:

switch (toView) {
    case 'name':
        currentlyViewing = (
            <View style={styles.subJuniorClass}>
                <Text> Hello Name </Text>
            </View>
        )
        break;
    case 'age': 
        currentlyViewing = (
            <View> 
                <Text> Hello Age </Text>
            </View>
        )
        break;
    case 'gender': 
        currentlyViewing = (
            <View> 
                    <Text> Gender </Text>
            </View>
        )
        break;
    case 'interested_gender': 
        currentlyViewing = (
            <View> 
                <Text> Interested Gender</Text>
            </View>
        )
        break;
    case 'photos':
        currentlyViewing = (
            <View> 
                <Text> Photos </Text>
            </View>
        )
        break;
    default:
        currentlyViewing = null
        break;
}