Есть массив картинок, которые должны отображаться на странице, но по какой-то причине не отображаются, я новичок в React, возможно не вижу очевидных вещей, подскажите, пожалуйста
import React from 'react';
import './ServiceStyle.scss';
import dev from './img/1.svg';
import qa from './img/2.svg';
import integ from './img/3.svg';
import consalt from './img/4.svg';
import mobile from './img/5.svg';
import ServiceItem from './ServiceItem.js';
const pics = [
{
id: 1,
src: {dev},
alt: 'software dev',
title: 'Разработка программного обеспечения'
},
{
id: 2,
src: {qa},
alt: 'qa',
title: 'QA-решения'
},
{
id: 3,
src: {integ},
alt: 'integration',
title: 'Интеграционные решения'
},
{
id: 4,
src: {consalt},
alt: 'consulting',
title: 'Консалтинг'
},
{
id: 5,
src: {mobile},
alt: 'mobile development',
title: 'Мобильные разработки'
}
]
export default class Service extends React.Component {
constructor(props){
super(props);
};
render(){
return (
<div className="service">
<h1>Сервисы и услуги</h1>
<div className="service-wrapper">
<div className="container">
{pics.forEach(picItem=> <ServiceItem key = {picItem.id} {...picItem}/>)}
</div>
</div>
</div>
)
}
}
export default function ServiceItem({ src, title, alt }) {
useEffect(() => {
// todo add event
return () => {
// todo remove event
};
}, []);
return (
<div className="services_item">
<div className="anim_pic">
<img className="anim_img" src={src} alt={alt} />
</div>
<div className="service_text">{title}</div>
</div>
);
}