React UseEffect Not Rendering
I am trying to do a simple render from state using useEffect but coming up blank, event though the useEffect is retrieving the data and twice! (although I only require it to render once and it won't get updated)..
Json data file (extract) 'moviedetails.json':
[
{
"Movie": {
"RegionId": 1,
"TitleId": 1,
"Title": "13 Hours: The Secret Soldiers of Benghazi",
"TitleYear": 2016,
"Summary": "On Sept. 11, 2012, Islamic militants attack the U.S. Consulate in Benghazi, Libya, killing Ambassador J blah blah."
},
"Scenes": [
{
"SceneId": 2,
"LocationSiteId": 108,
"LocationPlaceName": "Valletta",
"LocationSiteName": "Liesse Il-Belt",
"Latitude": 35.89615,
"Longitude": 14.5136
},
{
"SceneId": 474,
"LocationSiteId": 108,
"LocationPlaceName": "Valletta",
"LocationSiteName": "Liesse Il-Belt",
"Latitude": 35.89615,
"Longitude": 14.5136
},
etc etc...
}
]
And the js file...
import { Container } from "react-bootstrap";
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import { Link, useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import Movies from '../data/moviedetails.json'
const MovieDetails = () => {
const { id } = useParams()
const [movie, setMovie] = useState([])
useEffect(() => {
if (loadingMovie) {
return
}
const filteredMovieDetails = Movies.filter(moviedetail => moviedetail.Movie.TitleId == id)
setMovie ( filteredMovieDetails )
console.log ( filteredMovieDetails) // gets array but runs twice!
},[]);// Only needs to run once
return (
// RETURNS BLANK!
<Container>
<Row>
<h1>{movie.Title}</h1>
</Row>
<Row>
<article>
{movie.Summary}
</article>
</Row>
</Container>
)
}
export default MovieDetails;
At this stage I simply want to show the movie.Title and movie.Summary Nothing is returned although state 'movies' has the correct data. I assume that is has something to do with the 'async' and the useEffect is running AFTER the return statement?
Comments
Post a Comment