#2, получен и распечатан список контактов, добавлена модалка отображающая полную информацию

src/components/Contact/Contact.js

+import React from "react";
+
+const Contact = props => {
+    return (
+       <div onClick={props.select} className='Contact'>
+           <div>{props.name}</div>
+       </div>
+    );
+};
+
+export default Contact;

src/components/UI/Backdrop/Backdrop.css

+.Backdrop {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 100;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}

src/components/UI/Backdrop/Backdrop.js

+import React from "react";
+import "./Backdrop.css";
+
+const Backdrop = props => {
+  return props.show ? <div
+    className="Backdrop"
+    onClick={props.clicked}
+  /> : null;
+};
+
+export default Backdrop;

src/components/UI/Modal/Modal.css

+.Modal {
+    position: fixed;
+    z-index: 500;
+    background-color: white;
+    width: 70%;
+    border: 1px solid #ccc;
+    box-shadow: 1px 1px 1px black;
+    padding: 16px;
+    left: 15%;
+    top: 30%;
+    box-sizing: border-box;
+    transition: all 0.3s ease-out;
+}
+
+@media (min-width: 600px) {
+    .Modal {
+        width: 500px;
+        left: calc(50% - 250px);
+    }
+}

src/components/UI/Modal/Modal.js

+import React from "react";
+import "./Modal.css";
+import Backdrop from "../Backdrop/Backdrop";
+
+const Modal = props => {
+  return (
+    <>
+      <Backdrop
+        show={props.show}
+        clicked={props.closed}
+      />
+      <div
+        className="Modal"
+        style={{
+          transform: props.show ? "translateY(0)" : "translateY(-100vh)",
+          opacity: props.show ? 1 : 0
+        }}
+      >
+        {props.children}
+      </div>
+    </>
+  );
+};
+
+export default Modal;

src/containers/Contacts/Contacts.js

+import React, {Component} from "react";
+import {connect} from "react-redux";
+import {getContacts} from "../../store/actions";
+import Contact from "../../components/Contact/Contact";
+import Modal from "../../components/Modal/Modal";
+import {NavLink} from "react-router-dom";
+
+
+class Contacts extends Component {
+    state = {
+        selectContact: null,
+        modalShow: false
+    }
+
+    componentDidMount() {
+        this.props.getContacts()
+    }
+
+    selectHandler = (id) => {
+        this.setState({selectContact: id})
+    }
+
+    printContacts = () => {
+        let contacts = this.props.contacts
+        return Object.keys(contacts).map(contact => {
+            return <Contact
+                select={() => this.selectHandler(contact)}
+                name={contacts[contact].name}
+                email={contacts[contact].email}
+                phone={contacts[contact].phone}
+                photo={contacts[contact].photo}
+                key={contact}/>
+        })
+    }
+
+    render() {
+        return (
+            <>
+                {this.props.contacts ? <div className='Contacts'>{this.printContacts()}</div> : null}
+                {
+                    this.state.selectContact ?
+                        <Modal show={true}>
+                            <>
+                                <div> {this.props.contacts[this.state.selectContact].email} </div>
+                                <div> {this.props.contacts[this.state.selectContact].name} </div>
+                                <div> {this.props.contacts[this.state.selectContact].phone} </div>
+                                <NavLink to={`/contacts/edit/${this.state.selectContact}`}>edit</NavLink>
+                            </>
+                        </Modal>
+                        : null
+                }
+            </>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        contacts: state.contacts
+    }
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        getContacts: () => dispatch(getContacts())
+    }
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Contacts);