DisplayDirectoryRef component

import React from 'react'

import Styled from 'styled-components'

const ListStyle = Styled.li`
  border : solid 1px rgb(16, 73, 73);
  margin : 5px;
  `

const ContainerOfRef = Styled.div`
  display : flex;
  justify-content : center;
  `

const DisplayDirectoryRef = ({ Directory }) => {
  if (Directory.data) {
    let DisplayRef = Directory.data.map(elt => <ListStyle> {elt.Structure} {elt.Adresse} {elt.CodePostal} {elt.Ville} {elt.Telephone} {elt.Mail} <a href={elt.SiteWeb} >{elt.SiteWeb}</a></ListStyle>)
    return (
      <ContainerOfRef >
        <ul className='col-10' >
          {DisplayRef}
        </ul>
      </ContainerOfRef>
    )
  } else {
    return 'Wait for data...'
  }
}

export default DisplayDirectoryRef