hw-react-1/src/components/Goods/Good/Good.tsx

import { Link } from 'react-router-dom';

import s from './Good.module.css';
import { IGoodItem } from '../../../typescript/goods/interfaces';

const Good = ({
  good: { _id, name, createdAt, price, images },
  routName,
}: IGoodItem) => {
  return (
    <li className={s.good_item}>
      <Link className={s.good_link} to={`/categories/goods/${routName}/${_id}`}>
        <p>_id : {_id}</p>
        <p>name : {name ? name : 'missed'}</p>
        <p>createdAt : {createdAt ? createdAt : 'missed'}</p>
        <p>price : {price ? price : 'unknown'}</p>
        <img
          src={`http://shop-roles.asmer.fs.a-level.com.ua/${
            images && images[0].url
          }`}
          alt="*it has to be pic of product*"
          width="200"
          height="200"
        ></img>
      </Link>
    </li>
  );
};
export default Good;