how to show a Form in the same window on onClick event of a button in react.js

Question

I am new to react and struggling with some basics. I would like to display a Form on onClick event of a button. Somehow I could not manage to achieve and also I don't find any error in console. Can someone please guide me through.

Below is my App.js

import React, { Component } from 'react';
import EnvironmentList from './components/enviromentList';
import ManageApp from './components/manageApp'
import './App.css';

class App extends Component {
    state = {
        Apps : [
            { AppName : "a1" },
            { AppName : "a2" },
            { AppName : "a3" },
        ]
    }
    render(){
        return (
            <div className="App">
                <header className="App-header">

                    <h1>Welcome to environment Portal!</h1>
                </header>  
                <EnvironmentList Apps={this.state.Apps}/>
                <ManageApp />
            </div>
        );
    }
}

export default App;

Below is my manageApp.js

import React, { Component } from 'react';

class ManageApp extends Component{

    constructor(props){
        super(props);
        this.getForm = this.getForm.bind(this);
    }

    getForm = (e) => {
       return (
           <div> 
               <form id= "add-app">

                   <label>Application Name : </label>
                   <input type="text"> </input>

                   <label> id : </label>
                   <input type="text" ></input>

                   <label>Server details : </label>
                   <input ></input>

                   <button>Create</button>
              </form>
          </div>
       );
    }

    render(){
        return (
            <div className='manage-app'>
                <h1>Manage Application</h1>
                <button onClick={ this.getForm }>Add New Application</button>
                <button>Change Existing Application</button>
                <button>Remove Application</button>
            </div>
        );
    }
}

export default ManageApp;

How can I show the form in the browser on click of the button 'Add Application'

Answer 1

What you're missing is that you have to store that the user has clicked the button. Later you can use that information (state) to render different content.

import React, { Component } from 'react';

class ManageApp extends Component{

    constructor(props){
        super(props);

        // Here we initialize our components state
        this.state = {
            showForm: false
        };

        this.onClick = this.onClick.bind(this);
    }

    onClick () {
        // On click we change our state – this will trigger our `render` method
        this.setState({ showForm: true });
    }

    renderForm () {
       return (
           <div> 
               <form id= "add-app">

                   <label>Application Name : </label>
                   <input type="text"> </input>

                   <label> id : </label>
                   <input type="text" ></input>

                   <label>Server details : </label>
                   <input ></input>

                   <button>Create</button>
              </form>
          </div>
       );
    }

    render() {
        // We get the state for showing the form from our components state
        const { showForm } = this.state;

        return (
            <div className='manage-app'>
                <h1>Manage Application</h1>
                <button onClick={ this.onClick }>Add New Application</button>
                <button>Change Existing Application</button>
                <button>Remove Application</button>

                {/* We want to show the form if the state is true */}
                {showForm && this.renderForm()}
            </div>
        );
    }
}

export default ManageApp;

How exactly it should look/be integrated, you have to decide. But I think it's a good starting point.

Answer 2

Here's how you can do it

import React, { Component } from 'react';

class ManageApp extends Component{
state= {showForm: false}

showForm = () => {
   return (
     <div> 
    <form id= "add-app">

         <label>Application Name : </label>
         <input type="text"> </input>

         <label> id : </label>
         <input type="text" ></input>

         <label>Server details : </label>
         <input ></input>

         <button>Create</button>
      </form>
      </div>
     );
 }

render(){
    return (
        <div className='manage-app'>
        <h1>Manage Application</h1>
        <button  onClick={() => this.setState({showForm: true}) }>Add New Application</button>
        <button>Change Existing Application</button>
        <button>Remove Application</button>
        {this.state.showForm ? this.showForm() : null}
        </div>
    );
}

}
export default ManageApp