Convert string to date in map loop - ReactJS

Question

I'm trying to convert a date returned to me as a string (format: "2020-06-15T12:41:16+00:00") into a date object.

So I get my list of items in a fetchResults() function, and I thought I could do the conversion at the time of the .map in the return, only I don't really see the syntax I could use...

Anyone have an idea?

My component react :

const ResultList = ({userId}) => {

    const [resultsList, setResultList] = useState({})

    const [loading, setLoading] = useState(true)

    useEffect(() => {
        fetchResults()
    }, [userId])

    const fetchResults = async () => {
        try {
            const data = await resultsAPI.findResultsByUser(userId)
            setResultList(data)
            setLoading(false)
        } catch (error) {
            console.log(error)
        }
    }

    return(
        <>
            {!loading && 
                <>
                    <h3 className="resultCount">You have {resultsList.length} results</h3>
                    <ul className="resultsList">
                        {resultsList.map(result => {
                            return(
                                <li key={result.id} className="resultItem">
                                    <span>{result.resultDate}</span> //HERE CONVERT STRING TO DATE
                                    <span>{result.Maturity}</span>
                                </li>
                            )
                        })}
                    </ul>
                </>
            }

        </>
    )
}

export default ResultList

Thanks !

Did you try new Date(result.resultDate)? However this will not help you much as Date object will be converted to string again for display purpose. So the question is, what are you trying to achieve? — Rajesh Dixit
– Rajesh Dixit, Commented Jun 15, 2020 at 13:39
You will not be able to render Date-object anyways. Is there any particular reason why you need to do that? Do you need to convert your date string to some other format? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Jun 15, 2020 at 13:40
new Date(result.resultDate.split("T")[0]), will this work for you? — Ashik Paul
– Ashik Paul, Commented Jun 15, 2020 at 13:51
@YevgenGorbunkov I understand that, yes... I'd need to get the day in a thong, finally get a date in text form... But I think I'll settle for that. — Minos
– Minos, Commented Jun 15, 2020 at 14:15
@Rajesh Date(result.resultDate) to convert to date format in the display . All you had to do was remove the new... I'll try to convert it before putting it in the state, so I can getDay() — Minos
– Minos, Commented Jun 15, 2020 at 14:18

Jeeva · Accepted Answer · 2020-06-15 14:33:27Z

1

Use moment.js. You can able to convert a date string to any desired date format. For that you need to know the current date format of a date string

import moment from "moment";    
let resultDate = '2020-06-15 17:44:18'; // which is YYYY-MM-DD hh:mm:ss

<span>{moment(resultDate, 'YYYY-MM-DD hh:mm:ss').format('MM-DD-YYYY')}</span> // It will return 06-15-2020

answered Jun 15, 2020 at 14:33

Jeeva

1,59012 silver badges17 bronze badges

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

1 Comment

Minos Over a year ago

I hadn't thought of "moment"... Thank you!

Babushaeb · Accepted Answer · 2022-09-02 11:58:20Z

0

<li key={result.id} className="resultItem">
 <span> {new Date(`${result.resultDate}`).toDateString()}</span> // use template literals
  <span>{result.Maturity}</span>

Use this will defenitly work.

edited Sep 2, 2022 at 11:58

answered Sep 2, 2022 at 11:57

Babushaeb

11 bronze badge

Collectives™ on Stack Overflow

Convert string to date in map loop - ReactJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related