I cannot figure out why movies is undefined in movie database api react app

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;
    }
}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Hey there, I’m just starting out in React-Redux, but did you check your bindings?

this.something = this.something.bind(this)

Just a thought!
LT