this.props.history.push is not working while using HOC for logger

Question

I have written below code, 1.I want to use Connect for storing usernamein local storage 2.I am using HOC component for logging purpose (callInfoLogger and callErrorLogger) 3.If I use connect and HOC together then this.props.history.push is not working (Its not redirecting to MyDashboard page)

Could you please let me know what do I need to do to fix the code?

App.js

import { BrowserRouter as Router, Route, Switch, } from "react-router-dom";
class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/dashboard" component={MyDashboard} />
        </Switch>
      </Router>
    )
  }
}
export default App;

Login.js
import React, { Component } from 'react';
import { withRouter } from "react-router-dom";
import { connect } from 'react-redux';
import HighLevelComponent from './HighLevelComponent';
class Login extends Component {

    state = {
        username: '',
        password: '',
        loginsuccess: true
    }

    callOnSubmit = (e) => {
        e.preventDefault();
        this.props.callErrorLogger("Inside call on Submit");

        if (this.state.loginsuccess === true) {
            this.props.callInfoLogger("Calling Info logger ");

            this.props.onLoginSuccess(this.state.username);
            this.props.history.push('/dashboard');
        }
    };

    render() {
        return (
            <body>
                <form className="login-form" onSubmit={this.callOnSubmit}>
                    <input
                        type="text" onChange={e => {
                            this.setState({
                                ...this.state,
                                username: e.target.value
                            })
                        }}
                    />
                    <input type="password"
                        onChange={e => {
                            this.setState({
                                ...this.state,
                                password: e.target.value
                            })
                        }}
                    />
                    <input type="submit" className="btnSbumit" value="LOG IN" />
                </form>
            </body>
        )
    }

}

const mapDispatchToProps = dispatch => {
    return {
        onLoginSuccess: (username) => dispatch({ type: "LOGIN_SUCCESS", username: username })
    }
}


export default withRouter(HighLevelComponent(connect(null, mapDispatchToProps)(Login)));


MyDashboard.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
class MyDashboard extends Component {
    render() {
        return (
            <body>
                <h1>Welcome to React.. {this.props.username}</h1>
            </body>
        )
    }
}

const mapStateToProps = state => {
    return {
        username: state.username
    }
}

export default connect(mapStateToProps, null)(MyDashboard);


HighLevelComponent.js

import React from 'react';

    const HighLevelComponent = (WrapperComponent) => {
        class NewComponent extends React.Component {
            callInfoLogger = (infomsg) => {
                console.info(infomsg);
            }
            callErrorLogger = (errmsg) => {
                console.error(errmsg);
            }
            render() {
                return <WrapperComponent callInfoLogger={this.callInfoLogger} callErrorLogger={this.callErrorLogger} />
            }
    }
    return NewComponent;
}
export default HighLevelComponent;

Answer 1

In the HOC names HighLevelComponent pass the props to the wrapper component as follows:

 const HighLevelComponent = (WrapperComponent) => { class NewComponent extends React.Component { callInfoLogger = (infomsg) => { console.info(infomsg); } callErrorLogger = (errmsg) => { console.error(errmsg); } render() { return <WrapperComponent callInfoLogger={this.callInfoLogger} callErrorLogger={this.callErrorLogger} {...props} /> } } return NewComponent; }

Please note the {...props} on the wrapper component. In this way all the props will be further passed.

this.props.history.push is not working while using HOC for logger

Question

1 answers

solution1
0 ACCPTED 2020-05-26 14:09:43

this.props.history.push is not working while using HOC for logger

Question

1 answers

solution1 0 ACCPTED 2020-05-26 14:09:43

solution1
0 ACCPTED 2020-05-26 14:09:43