TypeError: Cannot read properties of undefined (reading 'toLocaleString')

user_15884979 0
Viewed 2058

I'm doing a React JS Course. I want to render the day and date by using props and toLocaleString method. But the app just crashes. Here's my code

 function ExpenseDate(props) {
  const month = props.date.toLocaleString("en-US", { month: "long" });
  const day = props.date.toLocaleString("en-US", { day: "2-digit" });
  const year = props.date.getFullYear();

  return (
    <div>
      <div>{month}</div>
      <div>{year}</div>
      <div>{day}</div>
    </div>
  );
}

export default ExpenseDate;

When I export & use that component & refresh the server. The server shows this: Undefined (reading 'toLocaleString')

Please help. I'm in a rush!

jsx reactjs
6 Answers

You need to verify if the fields have values. If you're using babel, this will work:

 function ExpenseDate(props) {
  const month = props.date?.toLocaleString("en-US", { month: "long" });
  const day = props.date?.toLocaleString("en-US", { day: "2-digit" });
  const year = props.date?.getFullYear();

  return (
    <div>
      <div>{month}</div>
      <div>{year}</div>
      <div>{day}</div>
    </div>
  );
}
user_124119120

okay, I thought I was crazy I'm literally doing this same react course on the exact same step and I'm trying to figure out wtf I'm doing wrong? I added the ? but now the date doesn't display.

Okay, if you move further ahead he corrects the problem, within the return on the ExpenseItem.js file you need to add the follow:

<ExpenseDate date={props.date} />
user_171020330

I was also getting the same error : TypeError: Cannot read properties of undefined (reading 'toLocaleString')

in my code

      <div className="coin-data">
            <p className="coin-price">Rs.{price}</p>
             <p className="coin-volume">Rs.{volume.toLocaleString()}</p>
            {pricechange<0 ? (
                <p className="coin-percent red">{pricechange.toFixed(2)}%</p>
            ):(
                <p className="coin-percent green">{pricechange.toFixed(2)}%</p>
            )
        }
        <p className="coin-marketcap">
            Mkt Cap: Rs.{marketcap.toLocaleString()}
        </p>
        </div>

In my case using ? to check the fields having value or not

      <div className="coin-data">
            <p className="coin-price">Rs.{price}</p>
             <p className="coin-volume">Rs.{volume?.toLocaleString()}</p>
            {pricechange<0 ? (
                <p className="coin-percent red">{pricechange.toFixed(2)}%</p>
            ):(
                <p className="coin-percent green">{pricechange.toFixed(2)}%</p>
            )
        }
        <p className="coin-marketcap">
            Mkt Cap: Rs.{marketcap?.toLocaleString()}
        </p>
        </div>
user_143409170

Check that you didn't forget to pass the data.

In ExpenseForm.js the submitHandler function saves the NewExpense with

props.onSaveExpenseData(expenseData).

It is crucial to pass the expenseData.

user_133153090

You May Have Already Found The Solution To This but I am also doing the same course and I was stuck in the same part

what I did notice is that it has nothing to do with the date.toLocaleString.

This error occurs because of the way we name our variables in different components so make sure that all the variables which are taking the input have the same name

in my case App.js

   const dummy = [{ id: "", date : new Date(),title :"Car Gas Fill Up",amount : 24.20,},]

ExpenseItem.js

<Card  className="expense-item">
 
<ExpenseDate date ={props.date} />
  <div className="expense-item__description">
    <h2>{props.title}</h2>

    <div className="expense-item__price">${props.amount}</div>
  
  </div>
</Card>

Expense.js

<Card className="expenses">
    <ExpensesFilter
      defaultYear={filterYear}
      changeYear={filterYearChanger}
    />

    {props.items.map((expense,index) => (
      <ExpenseItem
      key ={index}
        title={expense.title}
        amount={expense.amount}
        date={expense.date}
      
      />
    ))}
  </Card>

so variable from App.js array object has the same name in another component where they pass info to child components

user_190746900

In your child component, you need to add a prop that gets the value of 'date'. This way it won't return 'date' as undefined. Check the example below. In ExpenseItem.js add

 <ExpenseDate date={props.date} />
user_177991340
Related