Search code examples
javascriptreactjsrendersemantic-ui

Want to render different component after click on Add Button

I want to render VehicleInfoRender.js when click on 'Add' button which is in UMUIMAdditionalCoverage.js

App.js

import './App.css';

const App = () => {
  return (
    <BasicLayout />
  );
}

export default App;
Solution

  • First add a state to manage toggling VehicleInfoRender

    state = { activeIndex: 0,  showVehicleInfo: false}

    Then add a function to toggle showing and hiding the component

    <Button onClick={this.toggleVehicleInfo}>Add</Button>

const toggleVehicleInfo = () => {
 this.setState((prevState) => {showVehicleInfo: !prevState.showVehicleInfo});
};

    Finally add this where you want to render the component

    {this.state.showVehicleInfo && <VehicleInfoRender />}