BCN-0419-Riccardo

src/App.css

@@ -31,3 +31,17 @@
     transform: rotate(360deg);
   }
 }
+
+td {
+  width: 100px;
+  height: 100px;
+}
+
+img {
+  width: 110px;
+  height: 140px;
+}
+
+* {
+  margin: 0 auto
+}

src/App.js

@@ -1,25 +1,13 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import contacts from './data/contacts.json'
+import Contact from './components/contact'
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <Contact data={contacts}/>
       </div>
     );
   }

src/components/contact.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+
+class Contact extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      totalData: props.data,
+      data: props.data.slice(0,5)
+    }
+  }
+  getRandom = () => {
+    const dataCopy = this.state.data
+    const randomContact = this.state.totalData[Math.floor(Math.random()* this.state.totalData.length)]
+    dataCopy.push(randomContact)
+    this.setState({data: dataCopy})
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>IronContacts</h1>
+        <button onClick={this.getRandom}>Add a random contact</button>
+        {
+          this.state.data.map((element) => {
+            return <table>
+                    <tr>
+                      <td><img src={element.pictureUrl} alt="actor pic"/> </td>
+                      <td>{element.name}</td>
+                      <td>{element.popularity}</td>
+                    </tr>
+                  </table>
+          })
+        }
+      </div>
+    )
+  }
+}
+
+export default Contact