Page crashes(reading properties of undefined) in React.js

Question

In my project I'm using redux toolkit and react router v6. I have invoices list with 'View' button and when it's clicked it should open page with description about invoice. Also i have add invoice feature. When invoice added and I click on 'View' button page crashes and the error in console say:

Uncaught TypeError: Cannot read properties of undefined (reading 'invoice_num')

And the same happens if i click on existing item and reload the page. It says the error occured in InvoiceItem.js page.

Now the code. InvoiceItem.js

import React from "react";

import { useParams } from "react-router-dom";

import InvoiceItemDescription from "../Invoice/InvoiceItemDescription";

import { INVOICES_LIST } from "./InvoicesList";

const InvoiceItem = () => {
  const params = useParams();

  const invoice = INVOICES_LIST.find(
    (invoice) => invoice.id === params.invoiceId
  );

  return (
    
  );
};

export default InvoiceItem;

InvoiceItemDescription.js file

import React from "react";

import Wrapper from "../../UI/Wrapper";
import Footer from "../../UI/Footer";

import classes from "./InvoiceItemDescription.module.css";

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

const InvoiceItemDescription = (props) => {
  let counter = 1;

  return (
    
      
        
          
            
              
                
                  
                
                
                  
                
              
            
            
              
                
                  Invoice Info
                  {props.invoiceNumber}
                
                
                  
                    
                      Order Status:
                    
                    {props.status}
                  
                  
                    Order Date:
                    {props.order_date}
                  
                
              
              
                
                  Bill From
                  
                    
                      {props.bill_from}
                      
                        {props.bill_from_email}
                        


                        

 {props.bill_from_address}
                        


                        


                        

 {props.bill_from_phone}
                      
                    
                  
                
                
                  Bill To
                  
                    {props.bill_to}
                    
                      {props.bill_to_email} 


                      

 {props.bill_to_address} 


                      


                      


                      {props.bill_to_fax} 

 {props.bill_to_phone}
                    
                  
                
              
              
                
                  
                    
                    
                    
                    
                    
                  
                  
                    
                      #
                      Item Name
                      Unit Costs
                      Unit
                      Price
                    
                  
                  
                    
                      {counter++}
                      {props.item_name}
                      {props.unit_costs}
                      {props.unit}
                      {props.price}
                    
                  
                
              
              
                
                  Sub-total:
                  $13300
                
                
                  Vat:
                  $13300
                
                
                  Grand Total:
                  $14630
                
              
            
            
              
            
          
        
      
      
    
  );
};

export default InvoiceItemDescription;

And Invoice.js file

import React from "react";

import classes from "./Invoice.module.css";

import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";

import { invoiceActions } from "../../store/invoice-slice";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faTrash } from "@fortawesome/free-solid-svg-icons";

const Invoice = (props) => {
  const { id, invoice_num, bill_from, bill_to, status } = props.invoiceItem;

  const dispatch = useDispatch();

  const removeInvoiceItem = () => {
    dispatch(invoiceActions.removeInvoice(id));
  };

  return (
    
      
        
          
        
      
      
        {invoice_num}
      
      
        {bill_from}
      
      
        {bill_to}
      
      
        14300
        {/* This should be a dynamic value later */}
      
      
        
          {status}
        
      
      
        
          
            
          
          
        
      
    
  );
};

export default Invoice;

I have no idea what can cause the crash of the page. Can someone help me with this, please?

P.S. here is my github repo(it's my PET project) - https://github.com/stepan-slyvka/test-project

user_8690857 · Answer

The issue is that in the INVOICES_LIST test invoice data exported from src/components/Pages/Invoice/InvoicesList.js you are creating randomly generated id properties. When the page reloads, the entire app reloads, INVOICES_LIST is exported with all new id properties. The id that is read from the URL path is no longer valid and InvoiceItem can't render an invoice object that is undefined.

export const INVOICES_LIST = [
  {
    id: Math.random().toString(), // <-- random each time app loads
    ...
  },
  {
    id: Math.random().toString(), // <-- random each time app loads
    ...
  },
  {
    id: Math.random().toString(), // <-- random each time app loads
    ...
  },
];

You really want GUIDs to be stable, and more determinant and guaranteed for uniqueness, so don't use Math.random to create them, use something more like uuid if you need to generate unique ids.

To resolve your specific issue the fix is to just hardcode a unique id value. Even just complete gibberish, so long as it uniquely identifies an object, is sufficient (for testing).

Example:

export const INVOICES_LIST = [
  {
    id: '09u34otiuhnrfgp9ioj45',
    ...
  },
  {
    id: '234098ujh43gikoljaerpgiojaerg',
    ...
  },
  {
    id: '0934tpinr-9ujw3ensdsf',
    ...
  },
];

In the InvoiceItem component that is searching the INVOICES_LIST array keep in mind that Array.prototype.find potentially returns undefined when no match is found. The UI should handle this. Conditionally render the InvoiceItemDescription only if there is a found invoice.

Example:

const InvoiceItem = () => {
  const { invoiceId } = useParams();

  const invoice = INVOICES_LIST.find((invoice) => invoice.id === invoiceId);

  return invoice ? (
    
  ) : (
    No Invoices Found.
  );
};

user_19543257 · Answer

So, issue is fixed and to conclude, maybe someone is facing the same problem, I'll write a few words.

Firstly, when you have static data like I had(3 invoices which renders each time page loads) - hardcode your id's.

Secondly, for newly created items use stable id's(example - uuid) and store it somewhere(for example in local storage).

Thirdly, if page crashes or something renders wrong - check your state! In my case issue was in InvoiceItem.js file where i was trying to render INVOICES_LIST instead of selecting my state with const invoices = useSelector((state) => state.invoice.invoices)

Hope, this helps someone like me - novice in redux :)

P.S. final code is here

Page crashes(reading properties of undefined) in React.js

2 Answers