When I type the movie in a search bar and I press enter I keep getting movies as ‘undefined’ even when I defined it in my hook state.
Here is also a link to the tutorial that I am following. https://scrimba.com/p/pZaznUL/cgKVEEf4
I clearly have movies defined on line 11 of ServicesMovies.js
Here is my code:
ServicesMovies.js
import React, {useState} from 'react';
function ServicesMovies(){
//states input query , movie
const [query,setQuery]=useState('');
//create the state for movies, andn update the state appropriate
const [movies,setMovies]=useState([]);
const searchMovies=async(e)=>{
e.preventDefault()
// const query="Jurassic Park";
const url=`https://api.themoviedb.org/3/movie/550?api_key=5da0f84377abef3dd909473b3a4602f5&language=en-US&query=${query}&page=1&include_adult=false`;
try{
const res=await fetch(url);
const data=await res.json();
setMovies(data.results)
}
catch(err){
console.error(err)
}
}
return (
<>
<form className="form" onSubmit={searchMovies}>
<label className="label" htmlFor="query">Movie Name</label>
<input className="input" type="text" name="query"
placeholder="i.e. Jurassic Park"
value={query} onChange={(e) => setQuery(e.target.value)}
/>
<button className="button" type="submit">Search</button>
</form>
<div className="card-list">
{movies.map(movie => movie.title)}
</div>
</>
)
}
export default ServicesMovies;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import ServicesMovies from './ServicesMovies';
import './styles.css'
class Main extends React.Component{
render(){
return(
<div className="container">
<h1 className="title" >React Move search</h1>
<ServicesMovies />
</div>
)
}
}
ReactDOM.render(<Main />,document.getElementById('root'))
html{
font-size:10px;
}
*{
box-sizing: border-box;
}
body{
margin:0;
padding:0;
background-color:rgb(244,244,244);
color:blue;
}
p{
font-size: 1.6rem;;
}
small{
font-size:1.2rem;
}
.container{
margin:0 auto;
max-width:1000px;
padding:40px;
}
.title{
font-size:4.4rem;
text-align:center;
text-transform: uppercase;
}
.form{
display:grid;
}
.label{
font-size:1.2rem;
}
.input{
font-size:1.6rem;
padding:0.5rem 2rem;
line-height:2.8rem;
border-radius:28px;
border:1px solid #ddd;
margin-bottom:0.5rem;
}
.button{
background-color:rgba(0,0,0,0.75);
color:#fff;
padding:1rem 2rem;
border:1px solid rgba(0,0,0,0.75);
border-radius:20px;
font-size:1.5rem;
cursor:pointer;
transition:background-color 250ms;
}
button:hover{
background-color:rgba(0,0,0,0.85)
}
@media(min-width:786px){
.form{
grid-template-columns: auto 1fr auto;
grid-gap:1rem;
align-items: center;
}
.input{
margin-bottom:0;
}
}