Rendering Date from model in react

Question

I am trying to get the date to render in a nice format. currently rendering like this

I tried

  function getEndDateFromstring(){
    return itinerary.endDate.split('T').slice(-1)[0]
  }

then

{itinerary.name} from {getStartDateFromstring()} to {getEndDateFromstring()}

But it is throwing an error Uncaught TypeError: Cannot read properties of undefined (reading 'split')

Welcome to SO! Btw, I don't think it's necessary to upload an image to express less than 100 characters, please upload your errors or code in text format please. — HoldOffHunger, Nov 09 '21 at 01:11
Split can only be used on a string. you can try itinerary.endDate.toString().split('T').slice(-1)[0] or take a look at this question that goes through your question! https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date — wowza_MAN, Nov 09 '21 at 02:17
getDateFromstring C:/Users/rach-/Homework/Get_Traveling_App/client/src/componets/ItineraryList/index.js:13 10 | showUsername = true, 11 | }) => { 12 | function getDateFromstring(){ > 13 | return itinerary.endDate.toString().split('T').slice(-1)[0] 14 | } 15 | 16 | This is the error I am getting when using the above provided by wowza — Rachael Giancristofaro, Nov 09 '21 at 07:46

score 0 · Answer 1 · answered Nov 09 '21 at 08:41

This looks like a scope issue, pass the itinerary to your function like below

  function getEndDateFromstring(itinerary){
    return itinerary.endDate.split('T').slice(-1)[0]
  }

and call like

{itinerary.name} from {getStartDateFromstring(itinerary)} to {getEndDateFromstring(itinerary)}

score 0 · Accepted Answer · answered Nov 11 '21 at 07:08

I got it working with this

function addZeroIfOnlyOneChar(dateString){
    dateString = String(dateString);
    if(dateString.length < 2){
      return '0' + dateString
    }
    return dateString
  }

  function getDateFromString(dateString){
    const date = new Date(dateString)
    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();

    
    return `${addZeroIfOnlyOneChar(day)}-${addZeroIfOnlyOneChar(month)}-${year}`
  }

Thanks Everyone

Rendering Date from model in react

2 Answers2