title: Only One form working at a time in react
body: <p>I have 2 sets of forms:One is for login and the other one is for user registration.Both of them have their own components,css files and routes.But surprisingly,at any given point of time,only the login form works even though the code is the same.I even removed the form tag still my submitted content is not shown.I have also tried to try p</p>
  
  <p>Here is the code for the 2 files.</p>
  
  <pre><code> //Registeration.js
      import React from 'react'
      import './registeration_form.css'
      class Register extends React.Component
      {
        constructor(props)
        {
          super(props);
          this.state={username:'',email:'',password:'',confirm_pass:''}
          this.change_email=this.change_email.bind(this)
          this.change_password=this.change_password.bind(this)
          this.change_username=this.change_username.bind(this)
          this.confirm_pasword=this.confirm_pasword.bind(this)
          this.valdiate_data=this.valdiate_data.bind(this)
        }
  
        change_username(e)
        {
          this.setState({username:e.target.value})
        }
  
        change_email(e)
        {
          this.setState({email:e.target.value})
        }
  
        change_password(e)
        {
          this.setState({password:e.target.value})
        }
  
        confirm_pasword(e)
        {
          this.setState({confirm_pass:e.target.value})
  
        }
  
        valdiate_data(event)
        {
          event.preventDefault()
          console.log("hello")
          console.log(this.state.username)
          console.log(this.state.email)
          console.log(this.state.password)
          console.log(this.state.confirm_pass)
        }
  
        render()
        {
          return(
            &lt;div&gt;
              &lt;div id="register"&gt;
                &lt;form method="post"&gt;
                  &lt;legend id="register_legend"&gt;&lt;b&gt;Registeration Form&lt;/b&gt;&lt;/legend&gt;
                  &lt;label htmlFor="username"&gt;Username:&lt;/label&gt;
                  &lt;input type="text" id="username" name="username" onChange={this.change_username} placeholder="Username"/&gt;
                  &lt;label htmlFor ="email"&gt;Email Id:&lt;/label&gt;
                  &lt;input type="text" id="email" name="Email" onChange={this.change_email} placeholder="Email Id"/&gt;
                  &lt;label htmlFor="password"&gt;Password:&lt;/label&gt;
                  &lt;input type="password" id="password" name="password" onChange={this.change_password} placeholder="Password"/&gt;
                  &lt;label htmlFor ="confirm password"&gt;Confirm Password&lt;/label&gt;
                  &lt;input type ="text" id="confirm_password" name="Confirm password" onChange={this.confirm_pasword} placeholder="Confirm Password"/&gt;
                  &lt;input type="submit" value="Register" onClick={this.validate_data}/&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )
        }
      }
  
      export default Register
       //Login.js`enter code here`
       import React from 'react'
      import ReactDOM from 'react-dom'
      import Supers from 'superagent'
      import './Login_Page.css'
      //import defaults from 'superagent-defaults'
  
      //var defaults_arg=require('superagent-defaults');
  
      //var superagent_arguments=defaults_arg();
      //var superagent_default_arg = defaults()
  
      class Login extends React.Component
      {
        constructor(props)
        {
          super(props);
          this.state={username:'',password:'',API_Data:[]}
          this.Login_data_password=this.Login_data_password.bind(this)
          this.Login_data_username=this.Login_data_username.bind(this)
          this.MainRedirect=this.MainRedirect.bind(this)
          this.api_call_login=this.api_call_login.bind(this)
        }
  
      Login_data_username(e)
      {
        this.setState({username:e.target.value})
      }
  
      Login_data_password(password)
      {
        this.setState({password:password.target.value})
      }
  
      MainRedirect()
      {
        window.location = '/main';
      }
  
      api_call_login(e)
      {
        e.preventDefault()
        console.log(this.state.password,this.state.username)
        Supers.post('http://127.0.0.1:8000/user_ops/user_login/')
        .send({'username':this.state.username,'password':this.state.password})
        .end((error, response) =&gt;
        {
          if(!error &amp;&amp; response)
          {
              console.log(JSON.parse(response.body))
              console.log('Object')
              console.log(Object.keys(JSON.parse(response.body)))
              this.setState({API_Data:JSON.parse(response.body)})
              if(this.state.API_Data['Successful_Login']==='True')
              {
                this.setState({'username':'','password':''})
                console.log('Switching')
  
                //superagent_arguments
                //.set('Authorization',this.state.API_Data['token'])
                //.set('Content-Type','application/json')
  
                //console.log(superagent_arguments)
  
                this.MainRedirect()
              }
              else
              {
                  this.setState({'username':'','password':''})
                  window.location='/login'
              }
            }
          });
        }
  
        render(){
          return(
              &lt;div&gt;
                &lt;div id="container"&gt;
                  &lt;form method="POST"&gt;
                    &lt;legend id= "login_legend"&gt;&lt;b&gt;Login Form&lt;/b&gt;&lt;/legend&gt;
                    &lt;label htmlFor="username"&gt;Username:&lt;/label&gt;
                    &lt;input type="text" id="username" name="username" onChange={this.Login_data_username} placeholder="Username"/&gt;
                    &lt;label htmlFor="password"&gt;Password:&lt;/label&gt;
                    &lt;input type="password" id="password" name="password" onChange={this.Login_data_password} placeholder="Password"/&gt;
                    &lt;input type="submit" value="Login" onClick={this.api_call_login}/&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
              &lt;/div&gt;
        )
        }
        }
  
      export default Login
  </code></pre>