42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
|
|
import { CIcon } from '@coreui/icons-react'
|
|
|
|
import usersData from './UsersData'
|
|
|
|
const User = ({match}) => {
|
|
const user = usersData.find( user => user.id.toString() === match.params.id)
|
|
const userDetails = user ? Object.entries(user) :
|
|
[['id', (<span><CIcon className="text-muted" name="cui-icon-ban" /> Not found</span>)]]
|
|
|
|
return (
|
|
<CRow>
|
|
<CCol lg={6}>
|
|
<CCard>
|
|
<CCardHeader>
|
|
User id: {match.params.id}
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<table className="table table-striped table-hover">
|
|
<tbody>
|
|
{
|
|
userDetails.map(([key, value], index) => {
|
|
return (
|
|
<tr key={index.toString()}>
|
|
<td>{`${key}:`}</td>
|
|
<td><strong>{value}</strong></td>
|
|
</tr>
|
|
)
|
|
})
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
)
|
|
}
|
|
|
|
export default User
|