card text displays per card in browser

src/App.js

@@ -10,8 +10,8 @@ class App extends Component {
           <h1 className="header__h1"><span className="header__text">Inspiration Board</span></h1>
         </header>
         <Board
-          url="https://inspiration-board.herokuapp.com/boards/"
-          boardName={`Ada-Lovelace`}
+          // url="https://inspiration-board.herokuapp.com/boards/"
+          // boardName={`Ada-Lovelace`}
           />
       </section>
     );

src/components/Board.js

@@ -3,35 +3,49 @@ 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 NewCardForm from './NewCardForm';
+// import CARD_DATA from '../data/card-data.json';
 
 class Board extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
 
     this.state = {
       cards: [],
     };
   }
 
+  componentDidMount = () => {
+    axios.get('https://inspiration-board.herokuapp.com/boards/alexandria/cards')
+      .then((response) => {
+        this.setState({
+          cards: response.data
+        })
+      })
+      .catch((error) => {
+        this.setState({
+          error: error.message
+        })
+      });
+  }
+
   renderCardList = () => {
     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;
   }
 
   render() {
     return (
-      <div>
-        <Card/>
+      <div className="board">
+        {this.renderCardList()}
       </div>
     )
   }

src/components/Card.js

@@ -6,10 +6,10 @@ import './Card.css';
 class Card extends Component {
   render() {
     return (
-      <div className="card">
+      <article className="card">
         <p>{this.props.text}</p>
         <p>{this.props.emoji}</p>
-      </div>
+      </article>
     )
   }
 }