Learning react useState hooks by doing...

App.js

// https://github.com/mui-org/material-ui/tree/master/examples/create-react-app
import React from 'react';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import { makeStyles } from '@material-ui/core/styles';
import Link from '@material-ui/core/Link';
import SvgIcon from '@material-ui/core/SvgIcon';
import Button from '@material-ui/core/Button';

function LightBulbIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
    </SvgIcon>
  );
}

const useStyles = makeStyles((theme) => ({
  root: {
    margin: theme.spacing(6, 0, 3),
  },
  lightBulb: {
    verticalAlign: 'middle',
    marginRight: theme.spacing(1),
  },
}));

function ProTip() {
  const classes = useStyles();
  return (
    <Typography className={classes.root} color="textSecondary">
      <LightBulbIcon className={classes.lightBulb} />
      Pro tip: See more{' '}
      <Link href="https://material-ui.com/getting-started/templates/">templates</Link> on the
      Material-UI documentation.
    </Typography>
  );
}

function HelloButton({ onClick, parentCount, state }) {
  return (
    <div>
      <Button variant="contained" color="primary" onClick={onClick}>
        say hello!
      </Button>
      <br></br>
      <br></br>
      <Typography>
        Count: {parentCount}  a: {state}
      </Typography>
    </div>
  );
}

class ClassApp extends React.Component {

  state = {
    count: 0
  };

  updateCount= () => {
    this.setState({
      'count': this.state.count + 1
    })
  }

  render() {
    return (
      <Container maxWidth="sm">
        <Typography variant="h4" component="h1" gutterBottom>
          Example Condo Form {this.state.count}
        </Typography>
        <Button variant="contained" color="secondary" onClick={() => this.updateCount() }>
          test
        </Button>
        <br></br>
        <br></br>
        <HelloButton abc={123} onClick={this.updateCount} parentCount={this.state.count}/>
      </Container>
    );
  }
}

function App() {
  const [count, setCount] = React.useState(0);
  const [state, setState] = React.useState({
    'a': 0,
    'b': 1,
  });

  const updateCount = () => {
    setCount(count + 1)
    updateState()
  };

  const updateState = () => {
    setState({ ...state, 'a': state.a + 1})
  }

  return (
    <Container maxWidth="sm">
        <ProTip/>
        <Typography variant="h4" component="h1" gutterBottom>
          Example Condo Form {count} a: {state.a} b: {state.b}
        </Typography>
        <Button variant="contained" color="secondary" onClick={() => updateCount() }>
          test
        </Button>
        <br></br>
        <br></br>
        <HelloButton onClick={updateCount} parentCount={count} state={state.a}/>
    </Container>
  );
}


export default App;