Want to render different component after click on Add Button

Question

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;

Answer 1

Use state (eg: isShowVehicleInfoRender ) to handle turn on/off render this component

Answer 2

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 />}