{"size": 829, "ext": "js", "max_stars_repo_path": "src/components/MemoryDetail.js", "max_stars_repo_name": "MorganJBradford/memory-lane", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/MemoryDetail.js", "max_issues_repo_name": "MorganJBradford/memory-lane", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/MemoryDetail.js", "max_forks_repo_name": "MorganJBradford/memory-lane", "max_forks_repo_forks_event_min_datetime": "2021-05-04T00:13:42.000Z", "max_forks_repo_forks_event_max_datetime": "2021-05-04T00:13:42.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 23.6857142857, "max_line_length": 80, "alphanum_fraction": 0.5343787696}
import React from "react";
import PropTypes from "prop-types";

function MemoryDetail(props) {
  const { memory, onClickingDelete } = props;

  return (
    <>
      <div className="card-list">
        <h3>{memory.title}</h3>
        <h4>{memory.date}</h4>
          {memory.map((memoryImage) => 
            <div className="card">
              <img
                className="card--image"
                alt={memoryImage.alt_description}
                src={memoryImage.urls.full}
                width="50%"
                height="50%"
              ></img>
            </div>)
          }
      </div>
      <button onCLick={() => onClickingDelete(memory.id)}>Delete Memory</button>

    </>
  );
}

MemoryDetail.propTypes = {
  memory: PropTypes.object,
  onClickingDelete: PropTypes.func
};

export default MemoryDetail;