Render React Component on Button Click Event

Question

I have a minimalist landing page with two texts and one div, containing two buttons. On click of one of those buttons, I want to render the App component.

Here's what I've tried so far:

import React from 'react';
import App from '../App';

export default class Landing extends React.Component {

constructor(){
    super();
}

launchMainWithoutProps = () => {
    return (<App />)
};

showAppMain =() => {
    console.log('Silk board clicked');
    this.launchMainWithoutProps();
};   

render() {
    return (
        <div className='landing'>
            <div className="centered">
                <div className="introText">
                    <h3>Welcome to KahanATM</h3>
                    <h5>A Simple Web App with React to find ATMs closest to you (3km radius) or from Silk Board Flyover</h5>
                </div>

                <div className="buttonsLayout">

                    <button
                        className='getLocation'
                        onClick={this.showAppMainWithLocation}>
                        Get My Location
                    </button>

                    <button
                        className='silkBoard'
                        onClick={this.showAppMain}>
                        Central Silk Board
                    </button>
                </div>
            </div>
        </div>
    );
}

}

But when the button is clicked only the log is shown in console. How can I do this with or without react-router as I think this is too small to implement routes in. Thanks.

Answer 1

Use a boolean flag in your state. When you click and execute showAppMain set your state variable to true, which causes your render function to return <App /> instead:

import React from 'react';
import App from '../App';

export default class Landing extends React.Component {

    constructor() {
        super();

        this.state = {
            shouldShowMain: false,
        };

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

    showAppMain() {
        console.log('Silk board clicked');
        this.setState({shouldShowMain: true});
    };   

    render() {
        if (this.state.shouldShowMain) {
            return (<App />);
        }

        return (
            <div className='landing'>
                <div className="centered">
                    <div className="introText">
                        <h3>Welcome to KahanATM</h3>
                        <h5>A Simple Web App with React to find ATMs closest to you (3km radius) or from Silk Board Flyover</h5>
                    </div>

                    <div className="buttonsLayout">

                        <button
                            className='getLocation'
                            onClick={this.showAppMainWithLocation}>
                            Get My Location
                        </button>

                        <button
                            className='silkBoard'
                            onClick={this.showAppMain}>
                            Central Silk Board
                        </button>
                    </div>
                </div>
            </div>
        );
    }
}