text: import React, { useState, Fragment } from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  import Calculator from './Calculator';
  import Footer from "./Footer";
  import UseCalculator from './UseCalculator';
  
  const useStyles = makeStyles(theme => ({
  	button: {
  	  margin: theme.spacing(1),
  	},
  	input: {
  	  display: 'none',
  	},
    }));
  
  function App (props) {
  	const [ componentType, setComponentType ] = useState("hooks");
  	const classes = useStyles();
  	return (
  		<Fragment>
  			{ componentType === "hooks" ? (
  				<Fragment>
  					<Button
  						variant="contained"
  						color="primary"
  						className={classes.button}
  						onClick={e => setComponentType("class")}
  					>
          				View Calculator Example Using Class Components
        				</Button>
  					<UseCalculator/>
  				</Fragment>
  			) : (
  				<Fragment>
  					<Button
  						variant="contained"
  						color="primary"
  						className={classes.button}
  						onClick={e => setComponentType("hooks")}
  					>
  						View Calculator Example Using Hooks API
  					</Button>
  					<Calculator/>
  				</Fragment>
  			) }
  			<Footer />
  		</Fragment>
  	);
  };
  
  export default App;