How to fix Uncaught ReferenceError: attachment is not defined error in React component?

Question

React

Hello. There is a component

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;

If attachments is not empty then determine which attachment to show. If there is no component with attachments, we don't show it.
The problem is that if attachments is empty, it
{hasAttachments && ()}
does not go inside, but at the same time, checking for the type of attachment gives an error in the form
attachment && attachment.type === 'video' ? (...)

Uncaught ReferenceError: attachment is not defined

In principle, I remove it, but it seems to me that I add a bunch of extra checks.
How to do it right?
Thank you.

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];
}