Contacts.js

// src/components/Contact/Contact.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";

import "./Contacts.css";

export class Contacts extends Component {
  render() {
    const contactList = this.props.contacts.map((el, index) => {
      return (
        <Link style={{ textDecoration: "none" }} to={`/contact/${index}`}>
          <div key={index} className="contact-card">
            <h4>{el.name}</h4>
            <p>{el.phone}</p>
            <p>{el.email}</p>
          </div>
        </Link>
      );
    });
    return (
      <div className="main-container">
        {contactList}
        <Link style={{ textDecoration: "none" }} to="/contactform">
          <button className="add-btn">Add a new Contact</button>
        </Link>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    contacts : state.contacts
  }
}

export default connect(mapStateToProps, null)(Contacts);