Component_example

import React,{ useState, useEffect } from "react";
import styled from "@emotion/styled";
import Zoom from "react-reveal";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";

const Component = () => {

  const [value, setValue] = useState(0);

  const callAfterDomRendered = async () => {

  };
  
  useEffect(() => {
    callAfterDomRendered();
  }, []);

  return (
    <Container>
      <Grid container spacing={10} direction="column" alignItems="center">
        <Grid item xs={12}>
          <Zoom bottom>
            <Text>
            {value}
            </Text>
          </Zoom>
        </Grid>
        <Grid item xs={12}>
          <Zoom  bottom>
          <Button onClick={_ => {
            setValue(value + 1);
          }}>
            <Text>
              CLICK ME
            </Text>
          </Button>
          </Zoom>
        </Grid>
      </Grid>
    </Container>
  );
};


const Container = styled.main`


`;

const Text = styled.div`
text-align: center;
font-weight: bold;
font-size: 48px;
margin: 120px 0;
`;


export default Component;