import React , { Fragment } from 'react' ; import DataTitle from './data-title' ; interface UPRNsDataEntryProps { title : string ; tooltip : string ; value : { uprn : string ; parent_uprn ? : string ; } [ ] ; } const UPRNsDataEntry = ( props ) => { const uprns = props . value || [ ] ; const noParent = uprns . filter ( uprn => uprn . parent_uprn == null ) ; const withParent = uprns . filter ( uprn => uprn . parent_uprn != null ) ; return ( < Fragment > < DataTitle title = { props . title } tooltip = { props . tooltip } / > < dd > { noParent . length ? < ul className = "uprn-list" > { noParent . map ( uprn => ( < li key = { uprn . uprn } > { uprn . uprn } < /li>))} < /ul> : '\u00A0' } { withParent . length ? < details > < summary > Children < /summary> < ul className = "uprn-list" > { withParent . map ( uprn => ( < li key = { uprn . uprn } > { uprn . uprn } ( child of { uprn . parent_uprn } ) < /li>))} < /ul> < /details> : null } < /dd> < /Fragment>); } ; export default UPRNsDataEntry ;