nonfunctional delete button on every card

src/components/Board.js

@@ -12,29 +12,54 @@ class Board extends Component {
     super(props);
 
     this.state = {
-      cards: CARD_DATA["cards"],
+      cards: [],
     };
   }
 
+  componentDidMount = () => {
+    console.log('Component did mount was called')
+
+    axios.get('https://inspiration-board.herokuapp.com/boards/angelap/cards')
+    .then((response) => {
+      this.setState({ cards: response.data });
+      console.log(response.data)
+    })
+    .catch((error) => {
+      console.log('Error is happening');
+      console.log(error);
+      this.setState({ error: error.message});
+      return error;
+
+    });
+  }
+
   renderCards = () => {
     console.log('Rendering cards')
     const cardList = this.state.cards.map((card, index) => {
       return (
         <Card
           key={index}
-          text={card.text}
-          emoji={card.emoji}
+          text={card["card"].text}
+          emoji={card["card"].emoji}
           />
       );
     });
     return cardList;
   }
 
+  deleteCard = (card) => {
+    const cards = this.state.cards;
+
+    cards.delete(card);
+    this.setState({
+      cards,
+    });
+  }
+
   render() {
     return (
       <div>
         <section className="board">
-
           {this.renderCards()}
         </section>
       </div>

src/components/Card.js

@@ -19,15 +19,16 @@ class Card extends Component {
         <div className="card__content">
           <p className="card__content-text">{this.props.text}</p>
           <p className="card__content-emoji">{this.displayEmoji()}</p>
+          <button className="card__delete">Delete</button>
+          </div>
         </div>
-      </div>
-    )
+      )
+    }
   }
-}
 
-Card.propTypes = {
-  text: PropTypes.string.isRequired,
-  emoji: PropTypes.string,
-};
+  Card.propTypes = {
+    text: PropTypes.string.isRequired,
+    emoji: PropTypes.string,
+  };
 
-export default Card;
+  export default Card;