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
The release dates on my state component just remain unchanged
rstorms
February 4, 2020, 11:53pm
#8
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
rstorms
February 5, 2020, 12:01am
#10
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?
rstorms
February 5, 2020, 4:29pm
#15
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;
rstorms
February 5, 2020, 4:39pm
#18
Just by the first take, it looks like a string. Can we confirm?
rstorms
February 5, 2020, 4:43pm
#20
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