import type { FunctionComponent } from 'react' ; import { useMemo } from 'react' ; import { DescriptionListItemWrapper , DescriptionListTerm , DescriptionListDescription , } from './DescriptionListStyle' ; export interface DescriptionListItemProps { term : string ; } const DescriptionListItem = ( { term , children , ... otherProps } ) => { const description = useMemo ( ( ) => Array . isArray ( children ) ? children . filter ( ( value ) => ! ! value ) . length ? children : '-' : children || '-' , [ children ] ) ; return ( < DescriptionListItemWrapper { ... otherProps } > < DescriptionListTerm > { term } < /DescriptionListTerm> < DescriptionListDescription > { description } < /DescriptionListDescription> < /DescriptionListItemWrapper>); } ; export default DescriptionListItem ;