My latest project involves creating a movie search app where users can search for a movie and see details like the backdrop, poster image, title, and popularity displayed on the screen. However, I encountered an issue with accessing different movies with the same name. When searching for a movie like "Joker", only the first title that appears is accessed in my code.
const title = res.data['results'][0]['title'];
The [0] index indicates that it's grabbing the first movie from the search results. Here's a visual representation of how the API search looks in the browser: https://i.sstatic.net/ij2nh.png
Depending on the search query, there may be multiple movie titles with the same name, each listed with a different number under the API (e.g., [0], [1], etc.). I believe I need to use a for loop or forEach method to iterate through results[number] and retrieve all the ['original_title'] or ['title'], displaying them as a drop-down menu during the search process instead of waiting until submission. This is my first React project, so I'm uncertain whether this logic should be implemented within the clickHandler or elsewhere.
While most of my code resides in Movielist.js, I've included all three of my code files here just in case. I'm open to alternative solutions that make it easier to search for movies with identical titles.
Movielist.js
import React from 'react';
import axios from 'axios';
import '../CSS/style.css'
export default class Movielist extends React.Component {
state = {
title: "",
popularity: "",
poster: "",
background: "",
}
clickHandler = (event) => {
if (event.keyCode === 13) {
const query = event.target.value;
const API_KEY = 'caf02a958f137f43327649b2b8721302';
axios.get(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${query}`)
.then(res => {
const title = res.data['results'][0]['title'];
this.setState({ title });
const popularity = res.data['results'][0]['popularity']
this.setState({ popularity });
const poster = res.data['results'][0]['poster_path']
this.setState({ poster });
const background = res.data['results'][0]['backdrop_path']
this.setState({ background })
})
}
}
render() {
const backgroundStyle = {
backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url(https://image.tmdb.org/t/p/w500${this.state.background})`,
backgroundSize: "cover",
height: "100vh"
}
return (
<div id="main-div" style={backgroundStyle}>
<div id="second-div">
<input type="search" id="search" onKeyDown={event => this.clickHandler(event)} />
<h1 id="title">Title: {this.state.title}</h1>
<h1 id="popularity">Popularity: {this.state.popularity}</h1>
<img id="poster" src={`https://image.tmdb.org/t/p/w300${this.state.poster}`} />
</div>
</div>
)
}
}
App.js
import React from "react"
import Movielist from './components/Movielist'
function App() {
return (
<div>
<Movielist />
</div>
)
}
export default App
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);