REACT JS - TypeError: Cannot read properties of undefined (reading 'name')

Question

Unauthenticated users on my website should not be able to carry out a delete function. When I try to carry out a delete function as an unauthenticated user I get "TypeError: Cannot read properties of undefined (reading 'name')". How do I solve this error? Delete function works fine for authenticated user.

Here is a screenshot of the error

ProductList.js

import React from 'react';
import { withRouter } from 'react-router';
import { ButtonFooter, CardContent} from '../components';

function ProductList({
  handleDeleteProduct,
  handleSelectProduct,
  products,
  history,
  errorMessage,
}) {
  function selectProduct(e) {
    const product = getSelectedProduct(e);
    handleSelectProduct(product);
    history.push(`/products/${product.id}`);
  }

  function deleteProduct(e) {
    const product = getSelectedProduct(e);
    handleDeleteProduct(product);
  }

  function getSelectedProduct(e) {
    const index = +e.currentTarget.dataset.index;
    return products[index];
  }

  return (
    <div>
      {errorMessage && <div>{errorMessage}</div>}
      {(!products || !products.length) && !errorMessage && (
        <div>No recipes to show currently...</div>
      )}
      <ul className="list">
        {products.map((product, index) => (
          <li key={product.id} role="presentation">
            <div className="card">
              <CardContent
                name={product.name}
                description={product.description}
                image={product.image}

              />
              <footer className="card-footer">
                <ButtonFooter
                  className="delete-item"
                  iconClasses="fas fa-trash"
                  onClick={deleteProduct}
                  label="Delete"
                  dataIndex={index}
                  dataId={product.id}
                />
                <ButtonFooter
                  className="edit-item"
                  iconClasses="fas fa-edit"
                  onClick={selectProduct}
                  label="Edit"
                  dataIndex={index}
                  dataId={product.id}
                />
                Posted By: {}
              </footer>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default withRouter(ProductList);

Answer 1

try this code. product may not ready at first will be undefined

product?.name