1. import React, { useState, useEffect } from 'react';
2. //8. Import React's prop types to check type of props
3. import PropTypes from 'prop-types';
4. import 'react-bulma-components/dist/react-bulma-components.min.css';
5. import {
6.         Card
7. } from 'react-bulma-components';
8. import MemberRow from './MemberRow';
9.  
10. const MemberList = (props) => {
11.        
12.         let rows = "";
13.                 if(props.members.length === 0) {
14.                         rows = (
15.                         <tr>
16.                                 <td colSpan="4">
17.                                         <em>No members found.</em>
18.                                 </td>
19.                         </tr>
20.                 )
21.         } else {
22.                 rows = props.members.map(member => {
23.                                 return <MemberRow x={member} key={member.id}/>
24.                         })
25.         }
26.  
27.                 return (
28.                         <Card>
29.                                 <Card.Header>
30.                                         <Card.Header.Title>
31.                                                 Member List
32.                                         </Card.Header.Title>
33.                                 </Card.Header>
34.                                 <Card.Content>
35.                                         <table className="table is-fullwidth is-bordered is-striped is-hoverable">
36.                                                 <thead>
37.                                                         <tr>
38.                                                                 <th>Member Name</th>
39.                                                                 <th>Position</th>
40.                                                                 <th>Team</th>
41.                                                                 <th>Action</th>
42.                                                         </tr>
43.                                                 </thead>
44.                                                 <tbody>
45.                                         {/*7) employ conditional rendering*/}
46.                                                 {rows}
47.                                                 </tbody>
48.                                         </table>
49.                                 </Card.Content>
50.                         </Card>
51.                 )
52. }
53.  
54. //9.Apply prop type checking in component
55. MemberList.PropTypes = {
56.         members: Prop
57. }
58.  
59. export default MemberList;