Logan Leopold retake solution

src/components/App/App.js

@@ -1,10 +1,26 @@
 import React, { Component } from "react";
+import ContactList from "../ContactList/ContactList";
+import NewContact from '../NewContact/NewContact'
+import Header from '../Header/Header'
+import { Route } from 'react-router-dom'
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      contacts: this.props.contacts
+    };
+  }
+
   render() {
     return (
-      <div className="">
+      <div className="App">
         <p>app</p>
+        <Route path='/'
+          render={<ContactList contacts={this.state.contacts}/>}
+        />
+        <Route path='/new-contact' render={<NewContact />}/>
+        <Header />
       </div>
     );
   }

src/components/Contact/Contact.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+class Contact extends Component {
+
+    constructor () {
+        super()
+    }
+
+    render() {
+        return (
+            <div className='contact'>
+            <img></img>               
+            <h2></h2>
+            <h3></h3>
+            <h4></h4>
+            </div>
+        );
+    }
+}
+
+export default Contact;

src/components/ContactList/ContactList.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class ContactList extends Component {
+    render() {
+        return (
+            <div className='contact-list'>
+
+            </div>
+        );
+    }
+}
+
+export default ContactList;

src/components/Header/Header.js

@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import {Link} from "react-router-dom";
+
+class Header extends Component {
+  render() {
+    return (
+      <div>
+        <header>
+          Justice League App
+          <h1 />
+        </header>
+        <nav>
+          <Link to={"/new-contact"}></Link>
+          <Link to={"/"}></Link>
+        </nav>
+      </div>
+    );
+  }
+}
+
+export default Header;

src/components/NewContact/NewContact.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+class NewContact extends Component {
+    render() {
+        return (
+            <div>
+               <h1>New Contact</h1> 
+               <form>
+                   <input type='email' name='email' value='email'>email</input>
+                   <input type='name' name='name' value='name'>name</input>
+                   <input type='image' name='image' value='image'>image</input>
+                   <input type='text' name='profile_picture' value='super power'>super power</input>
+                   <input type='image' name='super_power' value='image'>image</input>
+               </form>
+            </div>
+        );
+    }
+}
+
+export default NewContact;

src/index.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './styles/index.css';
+import {BrowserRouter as Router} from 'react-router-dom'
 import App from './components/App/App';
 
 import contacts from "./contacts.json";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Router>
+    <App contacts={contacts} />
+</Router>, document.getElementById('root'));