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.

Yes, but most of the answers then didnt solve the problem. Giving back is not an issue for me, it has to be earned. Don't you think so? — Darth Plagueris
– Darth Plagueris, Commented Oct 22, 2018 at 15:26
ok, no problem then. Don't forget, if you end up solving the issue yourself, you can always provide answers to your own questions (Although you'll have to wait 2 days before you can accept it). When others have similar issues, they can look at the question, see a clear answer, and possibly reward you with an upvote. — Blue
– Blue, Commented Oct 22, 2018 at 15:28

Blue · Accepted Answer · 2018-10-22 15:06:44Z

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>
        );
    }
}

Collectives™ on Stack Overflow

Render React Component on Button Click Event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related