refactor: replace React.useState with useState for cleaner syntax in MovieTrailer component

Author: kentcdodds

exercises/01.start/01.problem.vite-plugin/app/movie-trailer.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import { useState } from 'react'
 import LiteYouTubeEmbed from 'react-lite-youtube-embed'
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
-	const [showTrailer, setShowTrailer] = React.useState(false)
+	const [showTrailer, setShowTrailer] = useState(false)
 
 	return (
 		<div className="mb-6">

exercises/01.start/01.solution.vite-plugin/app/movie-trailer.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import { useState } from 'react'
 import LiteYouTubeEmbed from 'react-lite-youtube-embed'
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
-	const [showTrailer, setShowTrailer] = React.useState(false)
+	const [showTrailer, setShowTrailer] = useState(false)
 
 	return (
 		<div className="mb-6">

exercises/01.start/02.solution.loader-rsc/app/movie-trailer.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import { useState } from 'react'
 import LiteYouTubeEmbed from 'react-lite-youtube-embed'
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
-	const [showTrailer, setShowTrailer] = React.useState(false)
+	const [showTrailer, setShowTrailer] = useState(false)
 
 	return (
 		<div className="mb-6">

exercises/01.start/03.solution.rsc-route/app/movie-trailer.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import { useState } from 'react'
 import LiteYouTubeEmbed from 'react-lite-youtube-embed'
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
-	const [showTrailer, setShowTrailer] = React.useState(false)
+	const [showTrailer, setShowTrailer] = useState(false)
 
 	return (
 		<div className="mb-6">

exercises/01.start/04.solution.server-fns/app/movie-trailer.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import { useState } from 'react'
 import LiteYouTubeEmbed from 'react-lite-youtube-embed'
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
-	const [showTrailer, setShowTrailer] = React.useState(false)
+	const [showTrailer, setShowTrailer] = useState(false)
 
 	return (
 		<div className="mb-6">

exercises/01.start/05.solution.use-client/app/movie-trailer.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-import React from 'react'
+import { useState } from 'react'
 import LiteYouTubeEmbed from 'react-lite-youtube-embed'
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
 import { type Movie } from '#app/movies-data.ts'
 
 export function MovieTrailer({ movie }: { movie: Movie }) {
-	const [showTrailer, setShowTrailer] = React.useState(false)
+	const [showTrailer, setShowTrailer] = useState(false)
 
 	return (
 		<div className="mb-6">