How to invoke a component on handleSubmit in react - reactjs

Question

I am learning react. I have created a form and on submit I want to render another(Info here) component and I am unable to do so.here is my code example.
App.js
class App extends React.Component {
constructor(props) {
super(props)
this.state = { username: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.value })
}
handleSubmit(event) {
alert(this.state.username)
event.preventDefault()
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
<button type="button" class ="button" value="Info" onClick={this.handleSubmit} component = {Summary}>Summary</button>
</form>
)
}
}
Info.js
class Info extends React.Component{
{more logic and code for this component}
render(){
return (<h1>Welcome To Info</h1>)
}
}
export default Info

Answer 1

You can do it this way
class App extends React.Component {
constructor(props) {
super(props)
this.state = { username: '', showInfo: false }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.value })
}
handleSubmit(event) {
alert(this.state.username)
event.preventDefault()
this.setState({showInfo: true});
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
<button type="button" class ="button" value="Info" onClick={this.handleSubmit} component = {Summary}>Summary</button>
</form>
{this.state.showInfo ? <Info /> : null}
</div>
)
}
}

Answer 2

function Info(props){
return <h3>{props.username}</h3>
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = { username: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange =(event)=> {
this.setState({ username: event.target.value })
}
handleSubmit(event) {
alert(this.state.username)
event.preventDefault()
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
<button type="button" class ="button" value="Info"
onClick={this.handleSubmit}>Summary</button>
</form>
<Info {...this.state}/>
</div>
)
}
}