Melissa : Edges : Inspiration Board

src/components/Board.js

@@ -8,26 +8,61 @@ import NewCardForm from './NewCardForm';
 import CARD_DATA from '../data/card-data.json';
 
 class Board extends Component {
+
   constructor() {
     super();
 
     this.state = {
+      // card: CARD_DATA.cards,
       cards: [],
     };
   }
 
+  componentDidMount() {
+    console.log("The component did in fact mount");
+
+  const GET_ALL_CARDS_URL = `${this.props.url}${this.props.boardName}/cards`;
+
+  axios.get(GET_ALL_CARDS_URL)
+    .then((response) => {
+      this.setState({
+        cards: response.data,
+      });
+    })
+    .catch((error) => {
+      this.setState({
+        error: error.message
+      });
+    });
+}
+
+
+
+
+
+
   render() {
+    const emoji = require("emoji-dictionary");
+
+    const cardList = this.state.cards.map(({card}) => {
+      console.log(card);
+      return <Card
+        key={card.id}
+        text={card.text}
+        emoji={emoji.getUnicode(`${card.emoji}`)}
+        />
+    });
+    console.log(cardList);
+
     return (
       <div>
-        Board
+          {cardList}
       </div>
     )
   }
-
 }
 
 Board.propTypes = {
 
 };
-
 export default Board;

src/components/Card.js

@@ -5,10 +5,20 @@ import emoji from 'emoji-dictionary';
 import './Card.css';
 
 class Card extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+
+    }
+  }
   render() {
     return (
       <div className="card">
-        Card
+        <ul>
+          {this.props.text}
+          {this.props.emoji}
+          <button> Delete </button>
+        </ul>
       </div>
     )
   }

src/data/card-data.json

@@ -6,7 +6,7 @@
     },
     {
       "text": "",
-      "Emoji": "heart_eyes"
+      "emoji": "heart_eyes"
     },
     {
       "text": "REST is part of work"