Skip to content

Instantly share code, notes, and snippets.

@jason-enstedt
Last active March 10, 2020 18:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jason-enstedt/8020fd5f74a95bf2686a022e8bf77661 to your computer and use it in GitHub Desktop.
Save jason-enstedt/8020fd5f74a95bf2686a022e8bf77661 to your computer and use it in GitHub Desktop.
React Instant search with api
const searchFast = () => {
if((document.getElementById('searchField').value) === ''){
let newQuery = '';
}else{
let query = document.getElementById('searchField').value;
let newQuery = query.split(' ');
}
setInput(newQuery)
}
useEffect(()=> {
let queries = Array.prototype.join.call(input, " ");
if(queries === ''){
setResults(empty);
return;
}
const getResults = async () => {
const res = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=aa9e4fb9176c3cfe803a8ef198c28c23&language=en-US&query=${queries}&page=1&include_adult=false`);
let data = await res.json();
let movies = data.results.slice(0, 5).map((mov)=>{
return(
<Link to={`/single/${mov.id}`} onClick={resetInput} >
<li>
<div>
<img className="searchImg" src={"https://image.tmdb.org/t/p/w500" + mov.poster_path} alt="movie poster" />
</div>
<div className="searchInfo">
<p>{mov.title}</p>
<p>{mov.release_date}</p>
<p>{mov.vote_average}</p>
</div>
</li>
</Link>
);
});
setResults(movies);
}
getResults();
},[input])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment