FEA_12_TRIATHLON/src/components/eventInfoShort/EventInfoShort.js

import React from 'react'
import { Link } from "react-router-dom";

import './eventInfoShort.scss';

export class EventInfoShort extends React.Component {
    render() {
        const { title, country, city, eventDate, imgSrc, id } = this.props;
        const dateArr = new Date(eventDate).toDateString().split(' ');
        return (
            <div className="event-item">
                <Link to={`/events/${id}`}>
                    <div className="event-content">
                        <div className="event-cap">
                            <h3 className="caption">{title}</h3>
                            <div className="place">{country}, {city}</div>
                        </div>
                        <div className="event-date">
                            {
                                dateArr.map(
                                    (el, ind) => ind > 0 ? <span key={ind}>{el} </span> : null
                                )
                            }
                        </div>
                        <div className="bg"></div>
                        <div className="event-picture">
                            <img src={imgSrc} alt={title} />
                        </div>
                    </div>
                </Link>
            </div>
        )
    }
}

export default EventInfoShort;