Convert date string to MM DD in react - not vanilla JS

Question

I understand how to do this outside of react. I have a date string that is returned from API in an object. I need to reformat it so instead of "2022-12-13T06:00Z" it would read "December 13". The object holds utcStart as "2022-12-13T06:00Z". Currently the below displays as "2022-12-13T06:00Z"

const eventDates = useRecoilValue(eventDatesState);
return (
    <Grid item xs={12}>
        eventDates.map (data =>(
            <ListItem>
                <span className="date">{eventDates.utcStart}</span>
            </ListItem>
        ))
    </Grid>
)

Since it is in a map function, I don't know how to do this for each one.This doesn't work

<span className="date">{new Date(calendarContent.utcStart)}</span>

@pilchard - no, if it was just in vanilla JS I'd be done. But I get several "react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead." errors using react — Dirty Bird Design, Dec 13 '22 at 00:02
Then you aren't putting out a string, so possibly read through the duplicate. `toLocaleDateString()` outputs a string while your example is just trying to render a complete Date object. — pilchard, Dec 13 '22 at 00:04
I think you're just forgetting the brackets. instead of ```jsx eventDates.map (data =>( ... )) ``` You could do ```jsx eventDates.map(data => { [JS logic where you convert the date and create a variable for each item here] return ( [JSX components with the variable declared above here] ) } ``` — Gustavo Maximo, Dec 13 '22 at 00:05
it's all just vanilla JS so long as you embed it correctly in the JSX — pilchard, Dec 13 '22 at 00:12
It probably is formatting Im having issue with, but just doesn't work for me inside the map. — Dirty Bird Design, Dec 13 '22 at 00:13
Have you tried the curly brackets? You can do Vanilla JS before returning a JSX (React) component. You can use the code to convert the data after the curly bracket and declare a variable to store the result. Then you can do `return ()` with the JSX inside the parenthesis. On the JSX you can instantiate the variable with the date. I'll create an answer to exemplify what I'm saying here. — Gustavo Maximo, Dec 13 '22 at 00:17

lei-san · Accepted Answer · 2022-12-13T00:31:26.300

2

You can do something like this:

var date = new Date('2022-12-13T06:00Z');

// Use the options object to specify the desired format
var options = { month: 'long', day: 'numeric' };
var formattedDate = date.toLocaleDateString('en-US', options);

console.log(formattedDate);
// OUTPUT
// December 13

Here's how to do this in React

export default function MyComponent() {
  var date = new Date('2022-12-13T06:00Z');

  // Use the options object to specify the desired format
  var options = { month: 'long', day: 'numeric' };
  var formattedDate = date.toLocaleDateString('en-US', options);

  return (
    <span>{formattedDate }</span>
  )

}

edited Dec 13 '22 at 00:31

answered Dec 13 '22 at 00:00

lei-san

58
6

I updated my answer on how to use it in React. It should work, but I don't have all the details about how it doesn't it work for you – lei-san Dec 13 '22 at 00:32
maybe accept `date` as a prop instead of as a static variable in the component, might be clearer for the OP. – pilchard Dec 13 '22 at 00:33

score 1 · Answer 2 · answered Dec 13 '22 at 00:28

Example using the answer above:

export default function GridWithFormattedDates() {
    const eventDates = useRecoilValue(eventDatesState);
    return (
        <Grid item xs={12}>
            {eventDates.map(eventDate => {
                const date = new Date(eventDate.utcStart);

                const options = { month: 'long', day: 'numeric' };
                const formattedDate = date.toLocaleDateString('en-US', options);
                return (
                    <ListItem>
                        <span className="date">{formattedDate}</span>
                    </ListItem>
                );
            })}
        </Grid>
    );
}

Convert date string to MM DD in react - not vanilla JS

2 Answers2