ArticleShare.jsx

import React, { Component } from "react";

import sprite from "../../assets/icons/sprite.svg";

class ArticleShare extends Component {
	socialItems = [
		{ id: 1, name: "icon-facebook", link: "https://facebook.com" },
		{ id: 2, name: "icon-twitter", link: "https://twitter.com" },
		{ id: 3, name: "icon-instagram", link: "https://instagram.com" },
		{ id: 4, name: "icon-linkedin", link: "https://linkedin.com" }
	];
	render() {
		return (
			<React.Fragment>
				<div className='blog__section'>
					<h4 className='heading-secondary'>Share this article</h4>
				</div>
				<div className='article__social'>
					<ul className='article__social-list'>
						{this.socialItems.map((socialItem) => (
							<li
								className='article__social-item'
								key={socialItem.id}>
								<a
									className='article__social-link'
									rel='noopener noreferrer'
									target='_blank'
									href={socialItem.link}>
									<svg className='article__social-icon '>
										<use
											xlinkHref={`${sprite}#${socialItem.name}`}
										/>
									</svg>
								</a>
							</li>
						))}
					</ul>
				</div>
			</React.Fragment>
		);
	}
}
export default ArticleShare;