Facebook
From Ungracious Armadillo, 11 Months ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 100
  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;