Move default contacts into App component as state

udacity · Mar 2, 2018 · d3d6eee · d3d6eee · tanuj1709 · Apr 5, 2020
1 parent b7b51c9
commit d3d6eee
Showing 1 changed file with 23 additions and 22 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,32 +1,33 @@
 import React, { Component } from 'react'
 import ListContacts from './ListContacts'
 
-const contacts = [
-  {
-    id: 'tyler',
-    name: 'Tyler McGinnis',
-    handle: '@tylermcginnis',
-    avatarURL: 'http://localhost:5001/tyler.jpg'
-  },
-  {
-    id: 'karen',
-    name: 'Karen Isgrigg',
-    handle: '@karen_isgrigg',
-    avatarURL: 'http://localhost:5001/karen.jpg'
-  },
-  {
-    id: 'richard',
-    name: 'Richard Kalehoff',
-    handle: '@richardkalehoff',
-    avatarURL: 'http://localhost:5001/richard.jpg'
-  },
-]
-
 class App extends Component {
+  state = {
+    contacts: [
+      {
+        id: 'tyler',
+        name: 'Tyler McGinnis',
+        handle: '@tylermcginnis',
+        avatarURL: 'http://localhost:5001/tyler.jpg'
+      },
+      {
+        id: 'karen',
+        name: 'Karen Isgrigg',
+        handle: '@karen_isgrigg',
+        avatarURL: 'http://localhost:5001/karen.jpg'
+      },
+      {
+        id: 'richard',
+        name: 'Richard Kalehoff',
+        handle: '@richardkalehoff',
+        avatarURL: 'http://localhost:5001/richard.jpg'
+      },
+    ]
+  }
   render() {
     return (
       <div>
-        <ListContacts contacts={contacts} />
+        <ListContacts contacts={this.state.contacts} />
       </div>
     )
   }