Error when looping to an array in React JS

Question

This is my code in "App.js" as the array I want to loop from, I wanted to loop from the array below and output the contents of it in the browser with a table.

This is my return

    return (
    
    <div className="container">
      <h1> Expenses </h1>

      <table className="table table-bordered">
        <tr>
          <th>Title</th>
          <th>Amount</th>
          <th>Date</th>
        </tr>

        {expenses.map((expense, index) => (
          <tr data-index={index}>
            <td>{expense.title}</td>
            <td>{expense.amount}</td>
            <td>{expense.date}</td>
          </tr>
        ))}

      </table>

    </div>
  );

This is the code from my component.

import './ExpenseItem.css';

function ExpenseItem(props) {
    return (
        <div className="expense-item" >
            <div>{props.date.toISOString()}</div>
            <div className="expense-item__description">
                <h2>{props.title}</h2>
                <div className="expense-item__price">{props.amount}</div>
            </div>
        </div>
    )
}

export default ExpenseItem

This is the error that I am getting.

codemode · Accepted Answer · 2022-07-13 17:06:48Z

3

You need to convert dates to strings. In your code, you pass Date Objects to HTML. The data format should be String. You can see formatting options for dates on MDN.

<td>{expense.date.toString()}</td>

answered Jul 13, 2022 at 17:06

codemode

4983 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Philippe Mallari Over a year ago

It's working now, thank you! I was just wondering, I already declared it in my props, but it didn't work still?

Philippe Mallari Over a year ago

<div>{props.date.toISOString()}</div>

codemode Over a year ago

If you mean props.date.toISOString(), it doesn't change/update prop. It is just printing the formatted data but the prop stays the same.

David · Accepted Answer · 2022-07-13 17:07:13Z

1

You're trying to output a Date object:

<td>{expense.date}</td>

Which, as the error states, is an object and not a simple value. So React has no way of knowing how to display it.

You can define the format and output that. For example:

<td>{expense.date.toLocaleDateString()}</td>

There are a variety of functions built-in to the Date object to format it, or you can combine multiple values from it into a custom format, or use a date formatting/parsing library, etc.

answered Jul 13, 2022 at 17:07

David

221k42 gold badges245 silver badges337 bronze badges

6 Comments

Philippe Mallari Over a year ago

It's working now, thank you! I was just wondering, I already declared it in my props, but it didn't work still? <div>{props.date.toISOString()}</div>

David Over a year ago

@PhilippeMallari: It's not clear what you're asking in that comment. That line of code is an example of formatting a date value for output. Is that not working in some way? Why don't you apply that same approach to the date value which is causing the error?

Philippe Mallari Over a year ago

Yes, it is actually in my component already, I just thought that it would already be handled there as this was my code in the component "ExpenseItem.js"

Philippe Mallari Over a year ago

import './ExpenseItem.css'; function ExpenseItem(props) { return ( <div className="expense-item" > <div>{props.date.toISOString()}</div> <div className="expense-item__description"> <h2>{props.title}</h2> <div className="expense-item__price">{props.amount}</div> </div> </div> ) } export default ExpenseItem

Philippe Mallari Over a year ago

Either way it's working, thank you!

|

Adarsh Thakur · Accepted Answer · 2022-07-13 17:07:22Z

0

return (
    
    <div className="container">
      <h1> Expenses </h1>

      <table className="table table-bordered">
        <tr>
          <th>Title</th>
          <th>Amount</th>
          <th>Date</th>
        </tr>

        {expenses.map((expense, index) => (
          <tr data-index={index}>
            <td>{expense.title}</td>
            <td>{expense.amount}</td>
            <td>{expense.date.toISOString()}</td>
          </tr>
        ))}

      </table>

    </div>
  );

Date object is not valid react child.

answered Jul 13, 2022 at 17:07

Adarsh Thakur

519 bronze badges

1 Comment

Philippe Mallari Over a year ago

It's working now, thank you! I was just wondering, I already declared it in my props, but it didn't work still? <div>{props.date.toISOString()}</div>

tomchestnut · Accepted Answer · 2022-07-13 17:32:12Z

0

I think in App.js when you loop through the expenses array, you want to return the ExpenseItem component, passing it the current expense item as a prop, like this:

{expenses.map((expense, index) => (
  <ExpenseItem item={expense} />
))}

And in ExpenseItem, since props is an object, you should change props.title to props.item.title etc.

Hope this helps!

answered Jul 13, 2022 at 17:32

tomchestnut

417 bronze badges

Collectives™ on Stack Overflow

Error when looping to an array in React JS

4 Answers 4

3 Comments

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related