Sign in
Log inSign up

In react when I consoling 'this.props' in a component, it prints empty object. Why?

Sonu Sasankan's photo
Sonu Sasankan
·Sep 14, 2018

I am trying to redirect my component when submitting a form. But the problem is I am not getting this.props.history in the component. How to accomplish my task like this.props.history.push('/newpage') when I submitting a form?

I have given my code for component below

import React, { Component } from 'react';

class Login extends Component {

    state = { name: "", email: "", password: "", };

    onChange = e => {
      this.setState({ [e.target.name]: e.target.value });
    };

    onSubmit = e => {
      e.preventDefault();
      this.props.callbackFromParent(this.state);

      this.props.history.push('/welcome')
    };



    render() {
      return (
        <React.Fragment>
        <form onSubmit={this.onSubmit}>
          <input
            placeholder="Enter name.."
            type="text"
            name="name"
            value={this.state.value}
            onChange={this.onChange}
          />
          <input 
            placeholder="Enter email.." 
            type="email" 
            name="email"
            value={this.state.value}
            onChange={this.onChange}
            />
          <input
            placeholder="Set password.."
            type="password"
            name="password"
            value={this.state.value}
            onChange={this.onChange}
          />
          <button type="submit">Submit</button>
        </form>
      </React.Fragment>
      );
    }
  }

  export default Login;

Any help would be appreciated!