Как исправить ошибку с Uncaught ReferenceError: attachment is not defined в React компоненте?

Question

[Дмитрий]

Здравствуйте. Есть компонент

components/pages/StockPage/StockSingle.jsx

import React from 'react';
import ReactHtmlParser from 'react-html-parser';
import {Link} from 'react-router-dom';
import StockImageWrap from './StockImageWrap';
import StockVideoWrap from './StockVideoWrap';


const StockSingle = ({stock, attachments, matchPath}) => {
    const hasAttachments = attachments ? true : false;

    if (hasAttachments) {
        const attachmentsList = attachments.filter(a => a.use_as_featured === 1 );
        const attachment = attachmentsList[0];
        const dateTime = attachment['updated_at'].split(' ', 2);
        const date = dateTime[0];
        const time = dateTime[1];
    }

    return (
        <div className="offers__item">
            {hasAttachments && (
                attachment && attachment.type === 'video' ? (
                    <StockVideoWrap
                        thumbnail={attachment.thumbnail}
                        atachment={attachment.attachment}
                        date={date}
                        time={time}
                    />
                ) : (
                    <StockImageWrap
                        thumbnail={attachment.thumbnail}
                        path={`${matchPath}/${stock.slug}`}
                        date={date}
                        time={time}
                    />
                )
            )}
            <div className="offers__content">
                <h2>
                    <Link to={{pathname: `${matchPath}/${stock.slug}`}} className="offers__itemTitle">
                        {ReactHtmlParser(stock.title)}
                    </Link>
                </h2>
                <div className="offers__itemExcerpt">
                    {ReactHtmlParser(stock.content)}
                </div>
                <Link to={{pathname: `${matchPath}/${stock.slug}`}} className="offers__itemReadMore">
                    Читать далее
                </Link>
            </div>
        </div>
    );
};

export default StockSingle;

Если attachments не пустой тогда определяем какой attachment показываем. Если нет компонент с attachments не показываем.

Проблема в том что если attachments пустой внутрь
{hasAttachments && ()}
не заходит, но при этом проверка на тип attachment
attachment && attachment.type === 'video' ? (...)
дает ошибку в виде

Uncaught ReferenceError: attachment is not defined

В принципе ее убираю, но как мне кажется добавляю кучу лишних проверок.

Как это сделать правильно?

Спасибо.

Answer 1

[Антон Спирин]

let attachment, date, time;

if (hasAttachments) {
  const attachmentsList = attachments.filter(a => a.use_as_featured === 1 );
  attachment = attachmentsList[0];
  const dateTime = attachment['updated_at'].split(' ', 2);
  date = dateTime[0];
  time = dateTime[1];
}

Comments

[Дмитрий]

согласен)