Page reloading on click event - React JS

Question

I have a ButtonActor.js for Buttons:

import React from 'react';
import '../../css/index.css';
import '../../css/App.css';
import '../../css/bootstrap.min.css';
import '../../css/font-awesome.css';
import '../../css/floating-labels.css';
import Home from "../view/Home";
import { Route,  BrowserRouter as Router } from 'react-router-dom'
class ButtonActor extends React.Component {
    isPrimaryButton;
    hLink;

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log("clicked");
    }


    render() {
        if(this.props.isPrimaryButton==="true")
        {
            return (
                <div>
                    <button className="btn btn-lg btn-primary btn-block btn-animated" type="submit">
                        {this.props.name}
                    </button>
                </div>
            );
        }
        else
        {
            return (
                <div>
                    <button className="btn btn-sm btn-secondary btn-block btn-animated" type="submit" onClick={this.handleClick}>
                        {this.props.name}
                    </button>
                </div>
            );
        }
    }
}
export default ButtonActor;

And the have this piece of code in Login.js :

  <div className="row justify-content-start">
                      <form className="form-signin">
                          <ButtonActor name="Don't Have An Account?" isPrimaryButton="false">
                          </ButtonActor>
                      </form>
                  </div>

Whenever I click on the Button this page just reloads the current page with a ? mark at the end.

How can I resolve this issue ?

As it reloads I can't even see if it is printing in the console or not.

Visit https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit — Sky Clong, Jul 27 '19 at 07:23

score 2 · Accepted Answer · answered Jul 27 '19 at 07:30

Usually there is no need to insert form tag in your case, this error related to this, when you click on button with type submit, it submit form, and reload the page but if you need to use this tag, and fixed this error, you need add onSubmit eventListener to form tag.

  <div className="row justify-content-start">
       <form className="form-signin" onSubmit={(event) => event.preventDefault()}>
            <ButtonActor name="Don't Have An Account?" isPrimaryButton={false}>
            </ButtonActor>
       </form>
  </div>

and its better to set isPrimaryButton prop as boolean props and edit your ButtonActor.js as below:

render() {
        if(this.props.isPrimaryButton===true)
        {
            return (
                <div>
                    <button className="btn btn-lg btn-primary btn-block btn-animated" type="submit">
                        {this.props.name}
                    </button>
                </div>
            );
        }
        else
        {
            return (
                <div>
                    <button className="btn btn-sm btn-secondary btn-block btn-animated" type="submit" onClick={this.handleClick}>
                        {this.props.name}
                    </button>
                </div>
            );
        }
    }

Page reloading on click event - React JS

1 Answers1