load a new component on button click in ReactJs?

Question

I want to load a new component on the button click in react. A new component should completely replace a current component - I mean that it should be loaded on a whole screen (not anywhere next to buttons).

import React from "react";

class MasterIncident extends React.Component {

  render() {

    return (
      <React.Fragment>
        <button
          variant="contained"
          size="medium"
          color="primary"
          value="single"
          name="1"
          onClick={this.props.clickBtn}
        >
          Add
        </button>
        <button
          variant="contained"
          size="medium"
          color="primary"
          value="batch"
          name="2"
          onClick={this.props.clickBtn}
        >
          Export
        </button>
        <h3>Master Incident Inventory</h3>
      </React.Fragment>
    );
  }
}

export default MasterIncident;

import MasterIncident from './MasterIncident';

import MasterAddPage from './MasterAddPage';

class MasterCreate extends Component {

    state = {
        renderView: 0
      };
    
      clickBtn = e => {
        this.setState({
          renderView: +e.target.parentNode.name
        });
      };
    
      render() {
        switch (this.state.renderView) {
          case 1:
            return <MasterAddPage />;
          default:
            return <MasterIncident clickBtn={this.clickBtn} />;
        }
      }
}

export default MasterCreate


 const MasterAddPage = (props) => {

         console.log(props)
            return (
              <div >Content</div>
            )
        }


export default MasterAddPage

It gives an error TypeError: Class constructor MasterIncident cannot be invoked without new.

Hi, can you describe your problem more in deep? Maybe you can give some of your current state and what you want to achieve — Wesley Loh

Khabir Khabir · Accepted Answer · 2020-05-06T18:42:55

I have fixed your code. Please check this example below:

MasterCreate Component

import MasterIncident from './MasterIncident';
import MasterAddPage from './MasterAddPage';
import React from "react";

class MasterCreate extends React.Component {
    state = {
        renderView: 0
    };

    clickBtn = (value) => {
        this.setState({
            renderView: value
        });
    };

    render() {
        switch (this.state.renderView) {
            case 1:
                return <MasterAddPage value={"Master Add Page is added"}/>;
            default:
                return <MasterIncident clickBtn={this.clickBtn}/>;
        }
    }
}
export default MasterCreate;

MasterIncident Component

import React from "react";

class MasterIncident extends React.Component {
    render() {
        console.log('master incident');
        return (
            <React.Fragment>
                <button
                    variant="contained"
                    size="medium"
                    color="primary"
                    value="single"
                    name="1"
                    onClick={() => {this.props.clickBtn(0)}}
                >
                    Add
                </button>
                <button
                    variant="contained"
                    size="medium"
                    color="primary"
                    value="batch"
                    name="2"
                    onClick={() => {this.props.clickBtn(1)}}
                >
                    Export
                </button>
                <h3>Master Incident Inventory</h3>
            </React.Fragment>
        );
    }
}
export default MasterIncident;

MasterAddPage Component

import React from "react";

const MasterAddPage = (props) => {
    console.log(props);
    return (
        <div>Content</div>
    )
};
export default MasterAddPage;

load a new component on button click in ReactJs?

2 Answers