CheckBox re-rendering

@@ -7,7 +7,7 @@ import Icon from "@material-ui/core/Icon";
 import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
-import Typography from '@material-ui/core/Typography';
+import Typography from "@material-ui/core/Typography";
 
 const useStyles = makeStyles((theme) => ({
   iconButton: {
@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
   },
   icon: {
     fontSize: 70,
-    color: "black"
+    color: "black",
   },
 
   paper: {
@@ -35,12 +35,12 @@ const useStyles = makeStyles((theme) => ({
       width: "30ch",
     },
   },
-  button:{
-    '& > *': {
+  button: {
+    "& > *": {
       margin: theme.spacing(1),
-      float:"right"
+      float: "right",
+    },
   },
-  }
 }));
 
 function getModalStyle() {
@@ -64,7 +64,16 @@ export default function AddButton() {
     setOpen(false);
   };
 
-  const body = (
+  return (
+    <>
+      <IconButton className={classes.iconButton} onClick={handleOpen}>
+        <Icon className={classes.icon}>add_circle</Icon>
+      </IconButton>
+      <Modal
+        open={open}
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+      >
         <div style={modalStyle} className={classes.paper}>
           <Typography variant="h5">ADD TODO LIST</Typography>
 
@@ -83,19 +92,6 @@ export default function AddButton() {
             </Button>
           </form>
         </div>
-  );
-
-  return (
-    <>
-      <IconButton className={classes.iconButton} onClick={handleOpen}>
-        <Icon className={classes.icon}>add_circle</Icon>
-      </IconButton>
-      <Modal
-        open={open}
-        aria-labelledby="simple-modal-title"
-        aria-describedby="simple-modal-description"
-      >
-        {body}
       </Modal>
     </>
   );

-import React from "react";
+import React, {useState} from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
@@ -30,15 +30,24 @@ const useStyles = makeStyles({
   },
 });
 
+
 export default function TodoCard({ data, isMine, isVisible }) {
   const classes = useStyles();
+  const [render, setRender] = useState(0);
   const todo = data.todo.split(",");
-  const check = data.ck.split(",").map((ck) => {
+  const [checkState, setCheckState] = useState(data.ck.split(",").map((ck) => {
     return parseInt(ck);
-  });
-
+  }))
   let settingButton = null;
 
+  const handleCheck = (idx) => {
+    let tempArr = checkState;
+    tempArr[idx] = tempArr[idx]?0:1;
+    setCheckState(tempArr);
+    setRender([]);
+  };
+
+
   if (isMine) {
     settingButton = (
       <SettingButton></SettingButton>
@@ -56,15 +65,16 @@ export default function TodoCard({ data, isMine, isVisible }) {
         <Typography className={classes.title} variant="h6">
           {data.title}
         </Typography>
-        {/* <Typography className={classes.percent} variant="h6">
-          99%
-        </Typography> */}
+        <Typography className={classes.percent} variant="h6">
+
+          {checkState.reduce((a, b) => a + b)}/{checkState.length}
+        </Typography>
         {todo.map((item, idx) => {
           return (
             <FormControlLabel
               className={classes.checkBox}
-              control={<Checkbox/>}
-              checked={check[idx]}
+              control={<Checkbox onClick={e=>(handleCheck(idx))}/>}
+              checked={checkState[idx]}
               label={item}
             />
           );