Calling class method from inside conditionally rendered JSX

SKeney Published at Dev

SKeney

Trying to call a class method from inside JSX that is stored inside a variable inside the class and conditionally rendered dependent on which step the user is on. I am pretty sure that the issue is with my attempt using this.

class CreateGameModal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            showChooseGameType: true,
            showGameLocation: false,
            showGameInfo: false,
            showSuggestedInvites: false,
            showConfirmation: false
        };

        this.onGameCreate = this.onGameCreate.bind(this);
    }

    render() {
        const { hideModal } = this.props;
        const { showChooseGameType, showGameLocation, showGameInfo, showSuggestedInvites, showConfirmation } = this.state;

        return (
                <Modal style={styles.modal} isVisible={this.props.isVisible} onBackdropPress={hideModal}>
                    { showChooseGameType &&
                        this.chooseGameCard
                    }

                    { showGameLocation &&
                        this.chooseGameLocationCard
                    }

                    { showGameInfo &&
                        this.chooseGameInfoCard
                    }

                    { showSuggestedInvites &&
                        this.chooseSuggestedInvitesCard
                    }

                    { showConfirmation &&
                        this.showConfirmationCard
                    }
                </Modal>
        );
    }

    chooseGameCard = ( 
        <View style={styles.createCard}>
            <Text style={styles.titleText} numberOfLines={1} >Create Game</Text>
            <ScreenStageBar numberOfStages={4} currentStage={1}/>
            <Text style={styles.descText} numberOfLines={1}>What type of game would you like to create?</Text>
            <Button title="Next" onPress={() => {
                this.setState({ showChooseGameType: false })
                this.setState({ showGameLocation: true })
            }} />
        </View>
    );

    chooseGameLocationCard = (
        <View style={styles.createCard}>
            <Text style={styles.titleText} numberOfLines={1} >Choose Game Location!</Text>
            <ScreenStageBar numberOfStages={4} currentStage={2}/>
            <Button title="Next" onPress={() => {
                this.setState({ showGameLocation: false })
                this.setState({ showGameInfo: true })
            }} />
        </View>
    );

    chooseGameInfoCard = (
        <View style={styles.createCard}>
            <Text style={styles.titleText} numberOfLines={1}  >Enter Game Information</Text>
            <ScreenStageBar numberOfStages={4} currentStage={3}/>
            <Button title="Next" onPress={() => {
                this.setState({ showGameInfo: false })
                this.setState({ showSuggestedInvites: true })
            }} />
        </View>
    );

    showConfirmationCard = (
        <View style={styles.createCard}>
            <Text style={styles.titleText} numberOfLines={1} >Congratulations!</Text>
        </View>
    );

    chooseSuggestedInvitesCard = (
        <View style={styles.createCard}>
            <Text style={styles.text}>Suggested Invites</Text>
            <ScreenStageBar numberOfStages={4} currentStage={4}/>
            <Button title="Create Game" onPress={this.onGameCreate} />
        </View>
    );

    onGameCreate = () => {
        //TODO: Add game creation logic with back end
        console.log("Press!");
        this.setState({ showSuggestedInvites: false });
        this.setState({ showConfirmation: true });
    }
}

The "Press" console log is not being logged and thus is not rendering the last bit of content I want to show after hitting the create game button.

Praful

You can use Arrow function like this:

onGameCreate = () => {
    //TODO: Add game creation logic with back end
    console.log('Press!')
    this.setState({ showSuggestedInvites: false });
    this.setState({ showConfirmation: true });
}

Collected from the Internet

Please contact [email protected] to delete if infringement.