diff --git a/package-lock.json b/package-lock.json
index 9cc9a2f8..b0f24117 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -896,9 +896,9 @@
       }
     },
     "@types/node": {
-      "version": "10.12.14",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.14.tgz",
-      "integrity": "sha512-0rVcFRhM93kRGAU88ASCjX9Y3FWDCh+33G5Z5evpKOea4xcpLqDGwmo64+DjgaSezTN5j9KdnUzvxhOw7fNciQ==",
+      "version": "10.12.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.15.tgz",
+      "integrity": "sha512-9kROxduaN98QghwwHmxXO2Xz3MaWf+I1sLVAA6KJDF5xix+IyXVhds0MAfdNwtcpSrzhaTsNB0/jnL86fgUhqA==",
       "dev": true
     },
     "@types/q": {
@@ -4149,6 +4149,15 @@
         "semver": "^5.6.0"
       }
     },
+    "enzyme-to-json": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.3.5.tgz",
+      "integrity": "sha512-DmH1wJ68HyPqKSYXdQqB33ZotwfUhwQZW3IGXaNXgR69Iodaoj8TF/D9RjLdz4pEhGq2Tx2zwNUIjBuqoZeTgA==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.4"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
diff --git a/package.json b/package.json
index 662625ff..64aa1db6 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   "devDependencies": {
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
+    "enzyme-to-json": "^3.3.5",
     "gh-pages": "^2.0.1"
   }
 }
diff --git a/src/App.js b/src/App.js
index c4854e15..a2a96d9f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import './App.css';
 import Board from './components/Board';
 
 class App extends Component {
+
   render() {
     return (
       <section>
@@ -11,7 +12,7 @@ class App extends Component {
         </header>
         <Board
           url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          boardName={`maryam`}
           />
       </section>
     );
diff --git a/src/components/Board.js b/src/components/Board.js
index 9222fd88..996fa987 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -2,10 +2,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import axios from 'axios';
 
+
 import './Board.css';
 import Card from './Card';
 import NewCardForm from './NewCardForm';
-import CARD_DATA from '../data/card-data.json';
+// import CARD_DATA from '../data/card-data.json';
+
 
 class Board extends Component {
   constructor() {
@@ -13,21 +15,129 @@ class Board extends Component {
 
     this.state = {
       cards: [],
-    };
+      errors: undefined,
+    }
+  };
+
+  componentDidMount() {
+
+    axios.get(this.props.url+this.props.boardName+'/cards')
+    .then((response) => {
+      const cards = response.data.map((card) => {
+
+        const newCard = {
+          ...card.card
+        };
+        return newCard;
+      });
+
+      this.setState({
+        cards: cards,
+      });
+    })
+
+    .catch((error) => {
+      let { errors } = this.state
+      errors.push(error.message)
+
+      this.setState({
+        errors: errors
+      })
+    })
+  }
+
+  displayCards = () => {
+    return this.state.cards.map((card, i) => {
+      return <Card
+      key={i}
+      id={card.id}
+      text={card.text}
+      emoji={card.emoji}
+      deleteCardCallback={this.removeCard}
+      />
+    });
+  }
+
+  removeCard = (cardId) => {
+    console.log('where deleting happends')
+    let deleteIndex = -1;
+    const { cards } = this.state
+
+    cards.forEach((card, index) => {
+      if (cardId === card.id) {
+        deleteIndex = index;
+      }
+    })
+
+    cards.splice(deleteIndex, 1);
+    this.setState({
+      cards
+    })
+
+
+    const url = 'https://inspiration-board.herokuapp.com/cards/'
+    axios.delete(url + cardId)
+    .then((response) => {
+      // let deletedCard = response.data.card
+
+      this.setState({
+        errorMessage: `Card Deleted`,
+      })
+    })
+    .catch((error) => {
+      let { errors } = this.state
+      errors.push(error.message)
+
+      this.setState({
+        errors: errors
+      })
+    })
+  }
+
+  addCard = (newCard) => {
+
+    const apiPayload = `text=${newCard.text}&emoji=${newCard.emoji}`
+
+    axios.post(this.props.url+this.props.boardName+'/cards?' + apiPayload)
+    .then((response) => {
+
+      let { cards } = this.state;
+      const newCard = response.data.card;
+
+      cards.push(newCard)
+
+      this.setState({
+        cards: cards,
+        errorMessage: `Card Added`
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        errorMessage: `Failure ${error.message}`
+      });
+    })
   }
 
   render() {
+
     return (
-      <div>
-        Board
-      </div>
+      <section className="board">
+      <section className="errorMessages">
+        {this.state.errors ? `${this.state.errors}` : ""}
+      </section>
+      <section>
+      <NewCardForm addCardCallback={this.addCard}/>
+      </section>
+      {this.displayCards()}
+      </section>
     )
   }
 
 }
 
 Board.propTypes = {
-
+  url: PropTypes.string.isRequired,
+  boardName: PropTypes.string.isRequired
 };
 
 export default Board;
diff --git a/src/components/Board.test.js b/src/components/Board.test.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/Card.js b/src/components/Card.js
index 6788cc03..64efa590 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,21 +1,33 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import emoji from 'emoji-dictionary';
 
 import './Card.css';
 
-class Card extends Component {
-  render() {
+const Card = (props) => {
+
     return (
       <div className="card">
-        Card
+        <section className="card__content">
+          <p className="card__content-text">{props.text}</p>
+
+          {props.emoji && (
+              <p className="card__content-emoji">
+              {emoji.getUnicode(props.emoji)}
+              </p>)}
+
+          <button onClick={() => props.deleteCardCallback(props.id)} type="button" className="card__delete">X</button>
+        </section>
       </div>
     )
   }
-}
 
-Card.propTypes = {
 
+Card.propTypes = {
+  id: PropTypes.number,
+  text: PropTypes.string,
+  emoji: PropTypes.string,
+  deleteCardCallback: PropTypes.func,
 };
 
 export default Card;
diff --git a/src/components/NewCardForm.css b/src/components/NewCardForm.css
index d11b9ad4..eee0530b 100644
--- a/src/components/NewCardForm.css
+++ b/src/components/NewCardForm.css
@@ -4,6 +4,8 @@
   width: 50%;
   margin: auto;
   padding-bottom: 4rem;
+  padding-right: 4rem;
+
 }
 
 .new-card-form__header {
diff --git a/src/components/NewCardForm.js b/src/components/NewCardForm.js
index 47331423..8dc006d0 100644
--- a/src/components/NewCardForm.js
+++ b/src/components/NewCardForm.js
@@ -1,6 +1,75 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import emoji from 'emoji-dictionary';
+// import emoji from 'emoji-dictionary';
 import './NewCardForm.css';
 
 const EMOJI_LIST = ["", "heart_eyes", "beer", "clap", "sparkling_heart", "heart_eyes_cat", "dog"]
+
+class NewCardForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      text: "",
+      emoji: ""
+    };
+  }
+
+  resetState = () => {
+    this.setState({
+      text: "",
+      emoji: "",
+    })
+  }
+
+  onFormChange = (event) => {
+    const field = event.target.name;
+    const value = event.target.value
+
+    const updatedState = {};
+    updatedState[field] = value;
+    this.setState(updatedState)
+  }
+
+  onNewCardSubmit = (event) => {
+    event.preventDefault();
+
+    this.props.addCardCallback(this.state);
+    this.resetState();
+  }
+
+  render() {
+
+    const emojiOptions = EMOJI_LIST.map((emoji, index) => {
+        return <option key={index} value={emoji}>{emoji}</option>
+      })
+
+    return (
+      <form className="" onSubmit={this.onNewCardSubmit}>
+      <header className="form-header">Add Inspiration Card</header>
+
+      <div>
+      <label className="" htmlFor="text">Text</label>
+      </div>
+      <textarea className="" placeholder="Text" name="text" onChange={this.onFormChange} value={this.state.text}></textarea>
+
+      <div>
+      <label className="">Emoji</label>
+      </div>
+      <select name="emoji" onChange={this.onFormChange} className="">
+         {emojiOptions}
+      </select>
+
+      <section>
+        <input className="form-button" type="submit" value="Add Card"/>
+      </section>
+      </form>
+    );
+  }
+}
+
+NewCardForm.propTypes = {
+  addCardCallback: PropTypes.func.isRequired,
+};
+
+export default NewCardForm;
diff --git a/src/components/NewCardForm.test.js b/src/components/NewCardForm.test.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/test/Board.test.js b/src/components/test/Board.test.js
new file mode 100644
index 00000000..8e51cc2e
--- /dev/null
+++ b/src/components/test/Board.test.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Board from '../Board';
+import { shallow } from 'enzyme';
+
+
+describe('Board', () => {
+  it('test it matches and exisiting snapshot', () => {
+    const wrapper = shallow(
+      <Board
+        url="https://inspiration-board.herokuapp.com/boards/"
+        boardName={"maryam"}
+      />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+});
diff --git a/src/components/test/Card.test.js b/src/components/test/Card.test.js
new file mode 100644
index 00000000..3cce2056
--- /dev/null
+++ b/src/components/test/Card.test.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import Card from '../Card';
+import { shallow } from 'enzyme';
+
+
+describe('Card', () => {
+  it ('test it matches and exisiting snapshot', () => {
+    const wrapper = shallow(
+      <Card
+        id={1}
+        text="hello there"
+        emoji="heart_eyes"
+        deleteCardCallback={() => {}}
+      />);
+
+      expect(wrapper).toMatchSnapshot();
+  });
+
+});
diff --git a/src/components/test/NewCardForm.test.js b/src/components/test/NewCardForm.test.js
new file mode 100644
index 00000000..37164728
--- /dev/null
+++ b/src/components/test/NewCardForm.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import NewCardForm from '../NewCardForm';
+import { shallow } from 'enzyme';
+
+
+describe('NewCardForm', () => {
+  it('test it matches and exisiting snapshot', () => {
+    const wrapper = shallow(
+      <NewCardForm
+        addCardCallback={() => {}}
+      />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+});
diff --git a/src/components/test/__snapshots__/Board.test.js.snap b/src/components/test/__snapshots__/Board.test.js.snap
new file mode 100644
index 00000000..44749f01
--- /dev/null
+++ b/src/components/test/__snapshots__/Board.test.js.snap
@@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Board test it matches and exisiting snapshot 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Board
+    boardName="maryam"
+    url="https://inspiration-board.herokuapp.com/boards/"
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": Array [
+        <section
+          className="errorMessages"
+        >
+          
+        </section>,
+        <section>
+          <NewCardForm
+            addCardCallback={[Function]}
+          />
+        </section>,
+        Array [],
+      ],
+      "className": "board",
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": "",
+          "className": "errorMessages",
+        },
+        "ref": null,
+        "rendered": "",
+        "type": "section",
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": <NewCardForm
+            addCardCallback={[Function]}
+          />,
+        },
+        "ref": null,
+        "rendered": Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "addCardCallback": [Function],
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        "type": "section",
+      },
+    ],
+    "type": "section",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          <section
+            className="errorMessages"
+          >
+            
+          </section>,
+          <section>
+            <NewCardForm
+              addCardCallback={[Function]}
+            />
+          </section>,
+          Array [],
+        ],
+        "className": "board",
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": "",
+            "className": "errorMessages",
+          },
+          "ref": null,
+          "rendered": "",
+          "type": "section",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": <NewCardForm
+              addCardCallback={[Function]}
+            />,
+          },
+          "ref": null,
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "class",
+            "props": Object {
+              "addCardCallback": [Function],
+            },
+            "ref": null,
+            "rendered": null,
+            "type": [Function],
+          },
+          "type": "section",
+        },
+      ],
+      "type": "section",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;
diff --git a/src/components/test/__snapshots__/Card.test.js.snap b/src/components/test/__snapshots__/Card.test.js.snap
new file mode 100644
index 00000000..88004c83
--- /dev/null
+++ b/src/components/test/__snapshots__/Card.test.js.snap
@@ -0,0 +1,240 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card test it matches and exisiting snapshot 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Card
+    deleteCardCallback={[Function]}
+    emoji="heart_eyes"
+    id={1}
+    text="hello there"
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": <section
+        className="card__content"
+      >
+        <p
+          className="card__content-text"
+        >
+          hello there
+        </p>
+        <p
+          className="card__content-emoji"
+        >
+          😍
+        </p>
+        <button
+          className="card__delete"
+          onClick={[Function]}
+          type="button"
+        >
+          X
+        </button>
+      </section>,
+      "className": "card",
+    },
+    "ref": null,
+    "rendered": Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          <p
+            className="card__content-text"
+          >
+            hello there
+          </p>,
+          <p
+            className="card__content-emoji"
+          >
+            😍
+          </p>,
+          <button
+            className="card__delete"
+            onClick={[Function]}
+            type="button"
+          >
+            X
+          </button>,
+        ],
+        "className": "card__content",
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": "hello there",
+            "className": "card__content-text",
+          },
+          "ref": null,
+          "rendered": "hello there",
+          "type": "p",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": "😍",
+            "className": "card__content-emoji",
+          },
+          "ref": null,
+          "rendered": "😍",
+          "type": "p",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": "X",
+            "className": "card__delete",
+            "onClick": [Function],
+            "type": "button",
+          },
+          "ref": null,
+          "rendered": "X",
+          "type": "button",
+        },
+      ],
+      "type": "section",
+    },
+    "type": "div",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": <section
+          className="card__content"
+        >
+          <p
+            className="card__content-text"
+          >
+            hello there
+          </p>
+          <p
+            className="card__content-emoji"
+          >
+            😍
+          </p>
+          <button
+            className="card__delete"
+            onClick={[Function]}
+            type="button"
+          >
+            X
+          </button>
+        </section>,
+        "className": "card",
+      },
+      "ref": null,
+      "rendered": Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": Array [
+            <p
+              className="card__content-text"
+            >
+              hello there
+            </p>,
+            <p
+              className="card__content-emoji"
+            >
+              😍
+            </p>,
+            <button
+              className="card__delete"
+              onClick={[Function]}
+              type="button"
+            >
+              X
+            </button>,
+          ],
+          "className": "card__content",
+        },
+        "ref": null,
+        "rendered": Array [
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "hello there",
+              "className": "card__content-text",
+            },
+            "ref": null,
+            "rendered": "hello there",
+            "type": "p",
+          },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "😍",
+              "className": "card__content-emoji",
+            },
+            "ref": null,
+            "rendered": "😍",
+            "type": "p",
+          },
+          Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "X",
+              "className": "card__delete",
+              "onClick": [Function],
+              "type": "button",
+            },
+            "ref": null,
+            "rendered": "X",
+            "type": "button",
+          },
+        ],
+        "type": "section",
+      },
+      "type": "div",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;
diff --git a/src/components/test/__snapshots__/NewCardForm.test.js.snap b/src/components/test/__snapshots__/NewCardForm.test.js.snap
new file mode 100644
index 00000000..207a9a40
--- /dev/null
+++ b/src/components/test/__snapshots__/NewCardForm.test.js.snap
@@ -0,0 +1,703 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NewCardForm test it matches and exisiting snapshot 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <NewCardForm
+    addCardCallback={[Function]}
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": Array [
+        <header
+          className="form-header"
+        >
+          Add Inspiration Card
+        </header>,
+        <div>
+          <label
+            className=""
+            htmlFor="text"
+          >
+            Text
+          </label>
+        </div>,
+        <textarea
+          className=""
+          name="text"
+          onChange={[Function]}
+          placeholder="Text"
+          value=""
+        />,
+        <div>
+          <label
+            className=""
+          >
+            Emoji
+          </label>
+        </div>,
+        <select
+          className=""
+          name="emoji"
+          onChange={[Function]}
+        >
+          <option
+            value=""
+          >
+            
+          </option>
+          <option
+            value="heart_eyes"
+          >
+            heart_eyes
+          </option>
+          <option
+            value="beer"
+          >
+            beer
+          </option>
+          <option
+            value="clap"
+          >
+            clap
+          </option>
+          <option
+            value="sparkling_heart"
+          >
+            sparkling_heart
+          </option>
+          <option
+            value="heart_eyes_cat"
+          >
+            heart_eyes_cat
+          </option>
+          <option
+            value="dog"
+          >
+            dog
+          </option>
+        </select>,
+        <section>
+          <input
+            className="form-button"
+            type="submit"
+            value="Add Card"
+          />
+        </section>,
+      ],
+      "className": "",
+      "onSubmit": [Function],
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": "Add Inspiration Card",
+          "className": "form-header",
+        },
+        "ref": null,
+        "rendered": "Add Inspiration Card",
+        "type": "header",
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": <label
+            className=""
+            htmlFor="text"
+          >
+            Text
+          </label>,
+        },
+        "ref": null,
+        "rendered": Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": "Text",
+            "className": "",
+            "htmlFor": "text",
+          },
+          "ref": null,
+          "rendered": "Text",
+          "type": "label",
+        },
+        "type": "div",
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "className": "",
+          "name": "text",
+          "onChange": [Function],
+          "placeholder": "Text",
+          "value": "",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": "textarea",
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": <label
+            className=""
+          >
+            Emoji
+          </label>,
+        },
+        "ref": null,
+        "rendered": Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": "Emoji",
+            "className": "",
+          },
+          "ref": null,
+          "rendered": "Emoji",
+          "type": "label",
+        },
+        "type": "div",
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": Array [
+            <option
+              value=""
+            >
+              
+            </option>,
+            <option
+              value="heart_eyes"
+            >
+              heart_eyes
+            </option>,
+            <option
+              value="beer"
+            >
+              beer
+            </option>,
+            <option
+              value="clap"
+            >
+              clap
+            </option>,
+            <option
+              value="sparkling_heart"
+            >
+              sparkling_heart
+            </option>,
+            <option
+              value="heart_eyes_cat"
+            >
+              heart_eyes_cat
+            </option>,
+            <option
+              value="dog"
+            >
+              dog
+            </option>,
+          ],
+          "className": "",
+          "name": "emoji",
+          "onChange": [Function],
+        },
+        "ref": null,
+        "rendered": Array [
+          Object {
+            "instance": null,
+            "key": "0",
+            "nodeType": "host",
+            "props": Object {
+              "children": "",
+              "value": "",
+            },
+            "ref": null,
+            "rendered": "",
+            "type": "option",
+          },
+          Object {
+            "instance": null,
+            "key": "1",
+            "nodeType": "host",
+            "props": Object {
+              "children": "heart_eyes",
+              "value": "heart_eyes",
+            },
+            "ref": null,
+            "rendered": "heart_eyes",
+            "type": "option",
+          },
+          Object {
+            "instance": null,
+            "key": "2",
+            "nodeType": "host",
+            "props": Object {
+              "children": "beer",
+              "value": "beer",
+            },
+            "ref": null,
+            "rendered": "beer",
+            "type": "option",
+          },
+          Object {
+            "instance": null,
+            "key": "3",
+            "nodeType": "host",
+            "props": Object {
+              "children": "clap",
+              "value": "clap",
+            },
+            "ref": null,
+            "rendered": "clap",
+            "type": "option",
+          },
+          Object {
+            "instance": null,
+            "key": "4",
+            "nodeType": "host",
+            "props": Object {
+              "children": "sparkling_heart",
+              "value": "sparkling_heart",
+            },
+            "ref": null,
+            "rendered": "sparkling_heart",
+            "type": "option",
+          },
+          Object {
+            "instance": null,
+            "key": "5",
+            "nodeType": "host",
+            "props": Object {
+              "children": "heart_eyes_cat",
+              "value": "heart_eyes_cat",
+            },
+            "ref": null,
+            "rendered": "heart_eyes_cat",
+            "type": "option",
+          },
+          Object {
+            "instance": null,
+            "key": "6",
+            "nodeType": "host",
+            "props": Object {
+              "children": "dog",
+              "value": "dog",
+            },
+            "ref": null,
+            "rendered": "dog",
+            "type": "option",
+          },
+        ],
+        "type": "select",
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": <input
+            className="form-button"
+            type="submit"
+            value="Add Card"
+          />,
+        },
+        "ref": null,
+        "rendered": Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "className": "form-button",
+            "type": "submit",
+            "value": "Add Card",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": "input",
+        },
+        "type": "section",
+      },
+    ],
+    "type": "form",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          <header
+            className="form-header"
+          >
+            Add Inspiration Card
+          </header>,
+          <div>
+            <label
+              className=""
+              htmlFor="text"
+            >
+              Text
+            </label>
+          </div>,
+          <textarea
+            className=""
+            name="text"
+            onChange={[Function]}
+            placeholder="Text"
+            value=""
+          />,
+          <div>
+            <label
+              className=""
+            >
+              Emoji
+            </label>
+          </div>,
+          <select
+            className=""
+            name="emoji"
+            onChange={[Function]}
+          >
+            <option
+              value=""
+            >
+              
+            </option>
+            <option
+              value="heart_eyes"
+            >
+              heart_eyes
+            </option>
+            <option
+              value="beer"
+            >
+              beer
+            </option>
+            <option
+              value="clap"
+            >
+              clap
+            </option>
+            <option
+              value="sparkling_heart"
+            >
+              sparkling_heart
+            </option>
+            <option
+              value="heart_eyes_cat"
+            >
+              heart_eyes_cat
+            </option>
+            <option
+              value="dog"
+            >
+              dog
+            </option>
+          </select>,
+          <section>
+            <input
+              className="form-button"
+              type="submit"
+              value="Add Card"
+            />
+          </section>,
+        ],
+        "className": "",
+        "onSubmit": [Function],
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": "Add Inspiration Card",
+            "className": "form-header",
+          },
+          "ref": null,
+          "rendered": "Add Inspiration Card",
+          "type": "header",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": <label
+              className=""
+              htmlFor="text"
+            >
+              Text
+            </label>,
+          },
+          "ref": null,
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "Text",
+              "className": "",
+              "htmlFor": "text",
+            },
+            "ref": null,
+            "rendered": "Text",
+            "type": "label",
+          },
+          "type": "div",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "className": "",
+            "name": "text",
+            "onChange": [Function],
+            "placeholder": "Text",
+            "value": "",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": "textarea",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": <label
+              className=""
+            >
+              Emoji
+            </label>,
+          },
+          "ref": null,
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "children": "Emoji",
+              "className": "",
+            },
+            "ref": null,
+            "rendered": "Emoji",
+            "type": "label",
+          },
+          "type": "div",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": Array [
+              <option
+                value=""
+              >
+                
+              </option>,
+              <option
+                value="heart_eyes"
+              >
+                heart_eyes
+              </option>,
+              <option
+                value="beer"
+              >
+                beer
+              </option>,
+              <option
+                value="clap"
+              >
+                clap
+              </option>,
+              <option
+                value="sparkling_heart"
+              >
+                sparkling_heart
+              </option>,
+              <option
+                value="heart_eyes_cat"
+              >
+                heart_eyes_cat
+              </option>,
+              <option
+                value="dog"
+              >
+                dog
+              </option>,
+            ],
+            "className": "",
+            "name": "emoji",
+            "onChange": [Function],
+          },
+          "ref": null,
+          "rendered": Array [
+            Object {
+              "instance": null,
+              "key": "0",
+              "nodeType": "host",
+              "props": Object {
+                "children": "",
+                "value": "",
+              },
+              "ref": null,
+              "rendered": "",
+              "type": "option",
+            },
+            Object {
+              "instance": null,
+              "key": "1",
+              "nodeType": "host",
+              "props": Object {
+                "children": "heart_eyes",
+                "value": "heart_eyes",
+              },
+              "ref": null,
+              "rendered": "heart_eyes",
+              "type": "option",
+            },
+            Object {
+              "instance": null,
+              "key": "2",
+              "nodeType": "host",
+              "props": Object {
+                "children": "beer",
+                "value": "beer",
+              },
+              "ref": null,
+              "rendered": "beer",
+              "type": "option",
+            },
+            Object {
+              "instance": null,
+              "key": "3",
+              "nodeType": "host",
+              "props": Object {
+                "children": "clap",
+                "value": "clap",
+              },
+              "ref": null,
+              "rendered": "clap",
+              "type": "option",
+            },
+            Object {
+              "instance": null,
+              "key": "4",
+              "nodeType": "host",
+              "props": Object {
+                "children": "sparkling_heart",
+                "value": "sparkling_heart",
+              },
+              "ref": null,
+              "rendered": "sparkling_heart",
+              "type": "option",
+            },
+            Object {
+              "instance": null,
+              "key": "5",
+              "nodeType": "host",
+              "props": Object {
+                "children": "heart_eyes_cat",
+                "value": "heart_eyes_cat",
+              },
+              "ref": null,
+              "rendered": "heart_eyes_cat",
+              "type": "option",
+            },
+            Object {
+              "instance": null,
+              "key": "6",
+              "nodeType": "host",
+              "props": Object {
+                "children": "dog",
+                "value": "dog",
+              },
+              "ref": null,
+              "rendered": "dog",
+              "type": "option",
+            },
+          ],
+          "type": "select",
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": <input
+              className="form-button"
+              type="submit"
+              value="Add Card"
+            />,
+          },
+          "ref": null,
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "host",
+            "props": Object {
+              "className": "form-button",
+              "type": "submit",
+              "value": "Add Card",
+            },
+            "ref": null,
+            "rendered": null,
+            "type": "input",
+          },
+          "type": "section",
+        },
+      ],
+      "type": "form",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getDerivedStateFromProps": true,
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+  },
+}
+`;