do not render nonexistent todo

This commit is contained in:
Sergey Yarkov 2020-06-16 17:48:18 +03:00
parent 9fdd0962c3
commit f5eaf9e525

View File

@ -49,35 +49,41 @@ const Todos = ({ data }) => {
<> <>
<UpdateTodoModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} handleCloseModal={handleCloseModal} selectedTodo={selectedTodo} setSelectedTodo={setSelectedTodo} /> <UpdateTodoModal isModalOpen={isModalOpen} handleOpenModal={handleOpenModal} handleCloseModal={handleCloseModal} selectedTodo={selectedTodo} setSelectedTodo={setSelectedTodo} />
<DeleteTodoDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} /> <DeleteTodoDialog isOpenDialog={isOpenDialog} handleCloseDialog={handleCloseDialog} selectedTodo={selectedTodo} />
{data.map((todo, i) => {data.map((todo, i) => {
<Grid key={i} item xs={12} md={4} lg={3}> if (todo.category) {
<Card> return (
<CardContent> <Grid key={i} item xs={12} md={4} lg={3}>
<Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom> <Card>
{todo.category.title} <CardContent>
<span className={classes.cardAlarm}> <Typography className={classes.cardCategoryHeading} color="textSecondary" gutterBottom>
<AlarmIcon className={classes.alarmIcon} color='action' /> {todo.category.title}
{new Date(todo.deadline).toLocaleString()} <span className={classes.cardAlarm}>
</span> <AlarmIcon className={classes.alarmIcon} color='action' />
</Typography> {new Date(todo.deadline).toLocaleString()}
<Typography className={classes.cardHeading} variant="h5" component="h2"> </span>
{todo.title} </Typography>
</Typography> <Typography className={classes.cardHeading} variant="h5" component="h2">
<Typography variant="body2" component="p"> {todo.title}
{todo.description} </Typography>
</Typography> <Typography variant="body2" component="p">
</CardContent> {todo.description}
<CardActions className={classes.cardActions}> </Typography>
<IconButton onClick={() => handleOpenModal(todo)} aria-label="update"> </CardContent>
<EditIcon /> <CardActions className={classes.cardActions}>
<IconButton onClick={() => handleOpenModal(todo)} aria-label="update">
<EditIcon />
</IconButton>
<IconButton onClick={() => handleOpenDialog(todo)} aria-label="delete" color='secondary'>
<DeleteIcon />
</IconButton> </IconButton>
<IconButton onClick={() => handleOpenDialog(todo)} aria-label="delete" color='secondary'> </CardActions>
<DeleteIcon /> </Card>
</IconButton> </Grid>
</CardActions> )
</Card> } else {
</Grid> return null
)} }
})}
</> </>
) )
} }