toLocaleDateString 不是反应 jsx 渲染中的 function

Question

Im trying to convert my date into a readable format, it current outputs as 2019-02-22T20:23:52.011Z

I tried adding the.toLocaleDateString to format this date but I keep getting the same error of

TypeError: item.CreateDate.S.toLocaleDateString is not a function

Im unsure if this is because I'm doing this within the render? I then tried to declare this var before the return in the map arrow function however this didn't seem to make a difference. Any help would be appreciated!

  renderOrders() {
    return (
      <div class="sl-orders-container">
        {this.state.orders.map((item) => {
          return (
            <div className="order-item-row">
              <div className="">
                {JSON.parse(item.BasketData.S)[0].ProductName.split(" - ")[0]}
              </div>
              <div class="sl-orders-order">
                <div class="">Order Detail</div>
                <ul>
                  <li>
                    Date Purchased: {item.CreateDate.S.toLocaleDateString()}
                  </li>

Example Item

    BasketTotal: {S: "80"}
    CreateDate: {S: "2019-02-23T02:44:07.499Z"}
    EventTicketCount: {S: "2"}
    Paid: {BOOL: true}

Answer 1

Thanks to @mplungjan the issue here was item.CreateDate.S was not a date object,

I then had to use

Date Purchased: {new Date(item.CreateDate.S).toLocaleDateString()}

instead of

Date Purchased: {item.CreateDate.S.toLocaleDateString()}

Answer 2

you can use

{new Date(**your date**).toLocaleDateString()}

Cheers !