import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import CreateChecklistItem from './CreateChecklistItem'; import ChecklistItem from './ChecklistItem'; import { FormGroup, FormControl } from '@material-ui/core'; import useStyles from '../../utils/modalStyles'; const Checklist = ({ card }) => { const classes = useStyles(); return ( <Fragment> <h3 className={classes.header}>Checklist</h3> <FormControl component='fieldset'> <FormGroup> {card.checklist.map((item) => ( <ChecklistItem key={item._id} item={item} card={card} /> ))} </FormGroup> </FormControl> <CreateChecklistItem cardId={card._id} /> </Fragment> ); }; Checklist.propTypes = { card: PropTypes.object.isRequired, }; export default Checklist;