React: How to format date to (M/DD/YYYY)

Right now I have the date showing up as (YYYY/DD/M) and I need it to be reversed. In my Component I have the code like this

`import React from 'react'
export default function Movies({title, popularity, release_date, image}) {
    return (
        <div className="movies-items">
            <h1 className="title">{title}</h1>
            <img className="image" src={"https://image.tmdb.org/t/p/w500/"+image} alt = ""></img>
            <strong><p className="popularity">Popularity</p></strong>
            <p>{popularity}</p>
            <strong><p className="date">Release Date</p></strong>
            <p>{release_date}</p>
    
        </div>
    )
}`

The answer has nothing to do with React. The answer is plain old JavaScript. What datatype is release_date? If it is a string, you can split it by “/” character, reverse it, and join it back together. Give it try.

So on the the release_date do i put release_date.split("").reverse().join("")?

Your split should use / as the delimiter.

I’ve inserted <p>{release_date.split('/').reverse().join()}</p> but still nothing

What do you get now?

The release dates on my state component just remain unchanged

Here is in my codepen doing the same thing:

@rstorms That is because date is a string after your first line. Then you try to treat it as an element by trying to reference an innerHTML property on it.

Making a few changes produces the expected result.

const dateElem = document.getElementById('release_date');
dateElem.innerText = dateElem.innerText.split('/').reverse().join('/');
1 Like

Oops, there ya go, though, OP.

@fkhan698 I would need to see implemented code to give further advice.

This is what I have so far. I understand how the code works, but I don’t know how to implement it in JSX

import React from 'react'
import MovieInfo from './MovieInfo.js'
// import 'react-router-dom';
export default function Movies({title, popularity, release_date, image}) {
const dateElem = document.getElementById('release-date');
dateElem.innerText = dateElem.innerText.split('/').reverse().join();

    return (
        <div className="movies-items">
            <h1 className="title">{title}</h1>
            <img className="image" src={"https://image.tmdb.org/t/p/w500/"+image} alt = ""></img>
            <strong><p className="popularity">Popularity</p></strong>
            <p>{popularity}</p>
            <strong><p className="date">Release Date</p></strong>
            <p id="release-date">{release_date}</p>
            <button></button>
        </div>
    )
}

How do you implement this in JSX?

What does the section of code that calls your Movie function look like?

You are passing release_date through as props. I think we need a bit more understanding of the other code. Maybe you can console.log(typeof release_date); and that could confirm it for us. If the app is getting too large, you could look into typechecking with prototypes to ensure it is the data type we want: https://reactjs.org/docs/typechecking-with-proptypes.html

If it is a string, we can assume release_date.split('/').reverse().join('/') would work as intended.

import React, {useEffect, useState} from 'react';
import './App.css';
import Movies from './Movies.js'




const App = () => {
  const API_KEY = '664e565dee7eaa6ef924c41133a22b63';

  const [movies, setMovies] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("Avengers");

  useEffect(() => {
    async function getMovies(){
      const response = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=en-US&query=${query}`)
      const data = await response.json()
      console.log(data.results)
      setMovies(data.results)
    }
    if(query !== "") //Anything typed in will run the function
      getMovies()
    

  }, [query])

  const updateMovies = (e) => {
    e.preventDefault();
    setSearch(e.target.value);
    
  }

  const getSearch = (e) => {
    e.preventDefault()
    setQuery(search) //Sets the value of the query to search
  }


  return (
   <div>
     <div className="header"><h1>Movie Database Search</h1>
     </div>
    <div className="container">
      <input className="search-input" onChange={updateMovies} value={search} type="text"></input>
      <button className="search-button" onClick={getSearch}type="submit"><i className="fa fa-search" aria-hidden="true"></i></button>
    </div>
      
        <div className="movies-row">
        {movies.map(movie => (
          <Movies
      
            key={movie.id}
            title={movie.title}
            popularity={movie.popularity}
            release_date={movie.release_date}
            image={movie.poster_path}
          />
        ))}
    
       </div>
       
       
     <footer className="footer">Power by MovieDB API</footer>
   </div>
  );
}

export default App;

This is my App.js

My App.js looks like this

import React, {useEffect, useState} from 'react';
import './App.css';
import Movies from './Movies.js'




const App = () => {
  const API_KEY = '664e565dee7eaa6ef924c41133a22b63';

  const [movies, setMovies] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("Avengers");

  useEffect(() => {
    async function getMovies(){
      const response = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=en-US&query=${query}`)
      const data = await response.json()
      console.log(data.results)
      setMovies(data.results)
    }
    if(query !== "") //Anything typed in will run the function
      getMovies()
    

  }, [query])

  const updateMovies = (e) => {
    e.preventDefault();
    setSearch(e.target.value);
    
  }

  const getSearch = (e) => {
    e.preventDefault()
    setQuery(search) //Sets the value of the query to search
  }


  return (
   <div>
     <div className="header"><h1>Movie Database Search</h1>
     </div>
    <div className="container">
      <input className="search-input" onChange={updateMovies} value={search} type="text"></input>
      <button className="search-button" onClick={getSearch}type="submit"><i className="fa fa-search" aria-hidden="true"></i></button>
    </div>
      
        <div className="movies-row">
        {movies.map(movie => (
          <Movies
      
            key={movie.id}
            title={movie.title}
            popularity={movie.popularity}
            release_date={movie.release_date}
            image={movie.poster_path}
          />
        ))}
    
       </div>
       
       
     <footer className="footer">Power by MovieDB API</footer>
   </div>
  );
}

export default App;

Just by the first take, it looks like a string. Can we confirm?

Yes this is a string

Awesome! We should be close then. Dig back down into the movie component and take my advice from above.

“If it is a string, we can assume release_date.split('/').reverse().join('/') would work as intended.”

1 Like