props are not passed by routes in components in reactjs

Question

Here i defined an onSubmit function inside Login component.In the index.js file i tried to renders the Login component by passing onSubmit function as a prop, index.js has its own internal handleSubmit method which actually calls the onSubmit method.

index.js

 import React from 'react';
    import ReactDom from 'react-dom';
    import Login from './testApp/login.js';
    import { BrowserRouter as Router, Route, Link } from "react-router-dom";
            function Greeting() {
        return <h1>ffgdf</h1>
    }
        handleSubmit(data) {
            console.log("++++data++++++++");
            console.log(data);
            console.log("++++data++++++++");
    }
    ReactDom.render((
       <Router>
       <div>
        <Route exact path="/" onSubmit={this.handleSubmit}  component={Login}/>
        {/* add the routes here */}
        <Route path="/test" component={Greeting}/>
        </div>
      </Router>
    ), document.getElementById('root')) 

login.js

import React from 'react';
import '../style/styles.css';
import { Link } from "react-router-dom";
import * as ReactBootstrap from 'react-bootstrap';
export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            uname:'',
            password:'',
            error:{}
        };
        this.handleInput=this.handleInput.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
    }
    handleInput(e) {
        this.setState({[e.target.name]:e.target.value})
        console.log(typeof this.state.uname);
    }
    formValidation() {
        let formValid=true;
        let errors=this.state.error;
        if(!(this.state.uname.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i))) {
            errors["email"]="Enter a valid email id";
            formValid=false;
        }

        if(formValid) {
            this.setState({error:{}});
        }
        else {
            this.setState({error:errors});
        }
        return formValid;
    }
    handleSubmit(e) {
        e.preventDefault();
        if(this.formValidation()) {
            alert("form submitted");
            this.props.onSubmit(this.state);
        }
        else
        {
            alert("form has errors");
        }

    }
    render() {
        return (
            <div className="body">
                <ReactBootstrap.Form horizontal onSubmit={this.handleSubmit}>

                    <ReactBootstrap.FormGroup style={{paddingBottom:8}}>
                        <ReactBootstrap.Col sm={6} smOffset={3}>
                            <ReactBootstrap.FormControl 
                                type="text" name="uname" placeholder="email"  value={this.state.uname} onChange={this.handleInput}
                            />
                        </ReactBootstrap.Col>   
                            <span style={{color:"red",position:'absolute',top:35,left:180}}>{this.state.error["email"]}</span>
                    </ReactBootstrap.FormGroup>

                    <ReactBootstrap.FormGroup style={{paddingBottom:8}}>
                        <ReactBootstrap.Col sm={6} smOffset={3}>
                            <ReactBootstrap.FormControl 
                                type="password" name="password" placeholder="password"  value={this.state.password} onChange={this.handleInput}
                            />
                        </ReactBootstrap.Col>   
                        <span style={{color:"red",position:'absolute',top:35,left:180}}>{this.state.error["password"]}</span>
                    </ReactBootstrap.FormGroup>

                    <ReactBootstrap.FormGroup>
                        <ReactBootstrap.Col sm={6} smOffset={3}>
                            <ReactBootstrap.Row>
                                <ReactBootstrap.Col sm={3}>
                                    <ReactBootstrap.Button bsStyle="primary" type="submit" disabled={!(this.state.uname.length!='' && this.state.password.length!=''  )}>
                                        Submit
                                    </ReactBootstrap.Button>
                                </ReactBootstrap.Col>   
                                <ReactBootstrap.Col sm={3}>
                                    <Link to="/test">
                                        <ReactBootstrap.Button bsStyle="primary"  >
                                            SignUp
                                        </ReactBootstrap.Button>
                                    </Link> 
                                </ReactBootstrap.Col>   
                            </ReactBootstrap.Row>   
                        </ReactBootstrap.Col>   
                    </ReactBootstrap.FormGroup>

                </ReactBootstrap.Form>

            </div>
        )
    }
} 

But it showing following error

./src/index.js
Syntax error: Unexpected token, expected ; (8:20)

   6 |  return <h1>ffgdf</h1>
   7 | }
>  8 |  handleSubmit(data) {
     |                     ^
   9 |      console.log("++++data++++++++");
  10 |      console.log(data);
  11 |      console.log("++++data++++++++");

I don't know what the issue here is.Can anyone help me to solve this

Answer 1

handleSubmit is not inside a class, so you have to either specify it as a function and call like handleSubmit instead of this.handleSubmit or you can convert your code in ReactDOM.render to a class, Also when passing the props, make use of render prop.

Check Passing custom props to router component in react-router v4 for more details

class App extends React.Component {
   handleSubmit(data) {
            console.log("++++data++++++++");
            console.log(data);
            console.log("++++data++++++++");
     } 
   render() {
    return (
         <Router>
           <div>
            <Route exact path="/" render={(props) => <Login onSubmit={this.handleSubmit} {...props}/>}/>
            {/* add the routes here */}
            <Route path="/test" component={Greeting}/>
            </div>
          </Router>
      )
   }
}

ReactDom.render(<App/>, document.getElementById('root'))