1. import React, { useState } from 'react';
2. import 'react-bulma-components/dist/react-bulma-components.min.css';
3. import{
4.     Section,
5.     Heading,
6.     Columns
7. } from 'react-bulma-components';
8.  
9. import MemberAdd from "../components/MemberAdd";
10. import MemberList from "../components/MemberList";
11.  
12.  
13. const MemberPage = (props) => {
14.  
15.     /*
16.         1) Create state (i.e., Single Source of Truth)
17.     */
18.     const [members, setMembers] = useState([]);
19.  
20.     /*
21.         2. Create a new function to add a document (e.g. addMember)
22.         -so that we can pass it to MemberAdd component
23.     */
24.     const addMember = (newMember) => {
25.         setMembers([...members, newMember]);
26.     }
27.    
28.         const sectionStyle = {
29.             paddingTop: "3em",
30.             paddingBottom: "3em"
31.         }
32.  
33.         return(
34.             <Section size="medium" style={ sectionStyle }>
35.                 <Heading>Members</Heading>
36.                 <Columns>
37.                     <Columns.Column className="is-4">
38.                         {/*3. Pass the new function as prop to child component */}
39.                         <MemberAdd addMember={addMember}/>
40.                         }
41.                     </Columns.Column>
42.                     <Columns.Column className="is-8">
43.                     {/* 6) pass props*/}
44.                         <MemberList members={members}/>
45.                     </Columns.Column>
46.                 </Columns>
47.             </Section>
48.         )
49. }
50.  
51. export default MemberPage;