Switching component upon button click in ReactJS

Question

Switching component upon button click in ReactJS

After clicking the button, I want to change the component displayed on the screen. I have created a function called changeComp() within my component's class. However, when I click the button, it doesn't route to the wallet-connect component as expected. Can someone please assist me in understanding what I am doing wrong here or why this approach might be incorrect?

changeComp(){
return (
            <Router>
                <Switch>
                    <Route exact path="/wallet-connect" component={WalletConnect} />
                </Switch>
            </Router>
        );}

<button className="btn w-100 mt-3 mt-sm-4" onClick={(event) => this.changeComp(event)} type="submit">Sign In</button>

javascript css reactjs

Answer 1

Answer №1

Avoid trying to return JSX from an event handler and expecting it to be displayed in the DOM.

In this scenario, make sure to include the "/wallet-connect" Route within your main router and use imperative navigation in the changeComp callback.

Main router:

<Switch>
  ...
  <Route path="/wallet-connect" component={WalletConnect} />
  ...
</Switch>

In the component with the button:

changeComp(event) {
  this.props.history.push("/wallet-connect");
}

<button
  className="btn w-100 mt-3 mt-sm-4"
  onClick={(event) => this.changeComp(event)}
  type="submit"
>
  Sign In
</button>

If the component does not receive the route props, you may need to enhance it with the withRouter Higher Order Component.

Suggestion:

When using a button with type="submit" inside a form, handle the imperative navigation in the form's onSubmit function.

submitHandler = event => {
  event.preventDefault();
  ...
  this.props.history.push("/wallet-connect");
}

...

<form onSubmit={this.submitHandler}>
  ...
  <button
    className="btn w-100 mt-3 mt-sm-4"
    type="submit"
  >
    Sign In
  </button>
</form>

If the button is not part of a form, specify its type as "button" to prevent interference with any form elements.

<button
  className="btn w-100 mt-3 mt-sm-4"
  onClick={(event) => this.changeComp(event)}
  type="button"
>
  Sign In
</button>

Answer 2

Avoid trying to return JSX from an event handler and expecting it to be displayed in the DOM.

In this scenario, make sure to include the "/wallet-connect" Route within your main router and use imperative navigation in the changeComp callback.

Main router:

<Switch>
  ...
  <Route path="/wallet-connect" component={WalletConnect} />
  ...
</Switch>

In the component with the button:

changeComp(event) {
  this.props.history.push("/wallet-connect");
}

<button
  className="btn w-100 mt-3 mt-sm-4"
  onClick={(event) => this.changeComp(event)}
  type="submit"
>
  Sign In
</button>

If the component does not receive the route props, you may need to enhance it with the withRouter Higher Order Component.

Suggestion:

When using a button with type="submit" inside a form, handle the imperative navigation in the form's onSubmit function.

submitHandler = event => {
  event.preventDefault();
  ...
  this.props.history.push("/wallet-connect");
}

...

<form onSubmit={this.submitHandler}>
  ...
  <button
    className="btn w-100 mt-3 mt-sm-4"
    type="submit"
  >
    Sign In
  </button>
</form>

If the button is not part of a form, specify its type as "button" to prevent interference with any form elements.

<button
  className="btn w-100 mt-3 mt-sm-4"
  onClick={(event) => this.changeComp(event)}
  type="button"
>
  Sign In
</button>

Answer 3

Answer №2

modifyComp(){

const history = useHistory();

return (
            <Router>
                <Switch>
                    <Route exact path="/wallet-connect" component={WalletConnect} />
                </Switch>
            </Router>
<button className="btn w-100 mt-3 mt-sm-4" onClick={(event) => history.push("/wallet-connect")} type="button">Sign In</button>
        );}

Answer 4

modifyComp(){

const history = useHistory();

return (
            <Router>
                <Switch>
                    <Route exact path="/wallet-connect" component={WalletConnect} />
                </Switch>
            </Router>
<button className="btn w-100 mt-3 mt-sm-4" onClick={(event) => history.push("/wallet-connect")} type="button">Sign In</button>
        );}

Switching component upon button click in ReactJS

Answer №1

Answer №2

Similar questions

In Internet Explorer versions 7 and 8, a transparent overlay div enables click-through functionality

Animate your menu on hover with jQuery!

Excessive CPU usage caused by a patch in jQuery dealing with regular expressions

Playing with JSON data in React

Using jQuery to create a Select All Checkbox that toggles a specific class

Aligning a element at the center is not functioning properly when using margin: 0 auto;

Automatic keyboard suggestions not working for HTML search input using Ajax

Sometimes the AngularJS scope is refreshed only intermittently

What could be causing next/image to fail in resizing images post-release only on a local server?

Exploring the capabilities of JSON.stringify in Internet Explorer 11

What is the process for updating my handle and sending it to the reducer function?

What is the best way to display two items side by side from a list of items in HTML?

Navigation Menu Spanning Across Full Width of All Screens

What is the best way to eliminate empty space at the bottom of a page that is being caused by a button?

What location is most ideal for incorporating JavaScript/Ajax within a document?

What is the best way to insert data from a promise into MongoDB?

What is the best way to achieve a column layout using Bootstrap?

Transitioning smoothly between different backgrounds will be like changing the cursor color

The has-error class cannot be applied to certain input elements

encountered issue accessing optional property post validation check