scrimba
Movie Search App
Manage State with React useState Hook
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Manage State with React useState Hook
AboutCommentsNotes
Manage State with React useState Hook
Expand for more info
searchMovies.js
run
preview
console
import React from "react";

export default function SearchMovies(){

const searchMovies = async (e) => {
e.preventDefault();
console.log("submitting");

const query = "Jurassic Park";

const url = `https://api.themoviedb.org/3/search/movie?api_key=5dcf7f28a88be0edc01bbbde06f024ab&language=en-US&query=${query}&page=1&include_adult=false`;

try {
const res = await fetch(url);
const data = await res.json();
console.log(data);
}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"/>
<button className="button" type="submit">Search</button>
</form>
)
}
Console
/index.html?query=
-6:29