title: React Onclick button change forms
body: <p>I need help to change the pages of my app.
  I searched a lot but still don't know how to do that.</p>
  
  <hr>
  
  <p><strong>Here is my index file:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <hr>
  
  <p><strong>Here is my App file</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';    
  import logo from './logo.svg';
  import './App.css';
  import Login from "./Login";
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Login /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <hr>
  
  <p><strong>Here is my Login file:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';    
  import CreateUser from "./CreateUser";
  
  export default class Login extends React.Component {
    state = {
      email: '',
      password: '',
    };
  
    change = e =&gt; {
      this.setState({
        [e.target.name]: e.target.value
      });
    };
  
    onSubmit = (e) =&gt; {
      e.preventDefault();
      console.log(this.state);
    };
  
    render() {
      return (
        &lt;form&gt;
          &lt;br /&gt;
          Login
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input
              name="email"
              placeholder='email'
              value={this.state.email}
              onChange={e =&gt; this.change(e)}
          /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input
              name="password"
              type='password'
              placeholder='password'
              value={this.state.password}
              onChange={e =&gt; this.change(e)}
          /&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;button onClick={e =&gt; this.onSubmit(e)}&gt;Login&lt;/button&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;button onClick={e =&gt; this.onSubmit(e)}&gt;Sign Up&lt;/button&gt;
        &lt;/form&gt;
      );
    }
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Here is my Create user file</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  
  export default class CreateUser extends React.Component {    
    state = {
      email: '',
      FirstName: '',
      LastName: '',
      personalphone: '',
      password: '',
      retypepassword: '',
    };
  
    change = e =&gt; {
      this.setState({
        [e.target.name]: e.target.value
      });
    };
  
    onSubmit = (e) =&gt; {
      e.preventDefault();
      console.log(this.state);
    };
  
    render() {
      return (
        &lt;form&gt;
          &lt;br /&gt;
          Create User
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input
              name="email"
              placeholder='email'
              value={this.state.email}
              onChange={e =&gt; this.change(e)}
          /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input
              name="FirstName"
              placeholder='FirstName'
              value={this.state.FirstName}
              onChange={e =&gt; this.change(e)}
          /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input
              name="LastName"
              placeholder='LastName'
              value={this.state.LastName}
              onChange={e =&gt; this.change(e)}
          /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input
              name="personalphone"
              placeholder='personalphone'
              value={this.state.personalphone}
              onChange={e =&gt; this.change(e)}
          /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input
              name="retypepassword"
              type='retypepassword'
              placeholder='retypepassword'
              value={this.state.retypepassword}
              onChange={e =&gt; this.change(e)}
          /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;input
              name="password"
              type='password'
              placeholder='password'
              value={this.state.password}
              onChange={e =&gt; this.change(e)}
          /&gt;
          &lt;br/ &gt;
          &lt;br/ &gt;
          &lt;button onClick={e =&gt; this.onSubmit(e)}&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      );
    }
  }
  </code></pre>
  
  <hr>
  
  <p>I want to change the page of login to createuser when I click the button Sign Up.</p>
  
  <p>Thx a lot,</p>
  
  <p>Eduardo Gris</p>