React Onclick button change forms - node.js

Question

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

Answer 1

You could just keep state of which screen it should show.
Quick example which you can make a lot nicer
constructor() {
super()
this.state = {
screen: 'login'
}
}
handleButtonClick(page) {
this.setState({ screen: page })
}
render() {
return(
<div>
{
this.state.screen === 'login' ?
<Login />
:
<SignUp />
}
<button onClick={(e) => this.handleButtonClick(e.target.value)} value='signup' />
</div>
)
}