1

Есть массив картинок, которые должны отображаться на странице, но по какой-то причине не отображаются, я новичок в 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>
  );
}

1 ответ 1

3

forEach не возвращает значение. Используйте map.

<div className="container">   
   {pics.map(picItem=>  <ServiceItem key = {picItem.id} {...picItem}/>)}
</div>
2
  • Спасибо большое!
    – Anfieldy
    15 мар 2021 в 10:04
  • Так же, вместо множества импортов можно воспользоваться функцией которая описана в этом посте: coderoad.ru/44607396/…
    – Locker
    15 мар 2021 в 10:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.