solution

[Mariana-VV]

DEMO LINK

[etojeDenys]

i can create the movie only with spaces, let's fix that

[etojeDenys]

we can combine it in one useState

const [newMovie, setNewMovie] = useState({
  title: '',
  ...
})

now we can also create only one handle function for all fields

const handleChange = (e: ...) => {
  const {name, value} = e.target;
  setMovie((prevMovie) => ({...prevMovie, [name]: value}))
}

don't forget to specify name attr to input in TextField

[anastasiia-tilikina]

In order to fix your bug you should add name attr for your input in TextField component:

You forgot to do that)
Next time please ask for help in chat before sending your task for review. You'll get help faster

[anastasiia-tilikina]

move this obj to a variable, let's say InitialValues to be able to reuse it, for example in reset method

[Viktor-Kost]

isn't fixed. Create a variable outside the component and reuse it

const initialMovieState = {
  title: '',
  description: '',
  imgUrl: '',
  imdbUrl: '',
  imdbId: ''
}

Suggested change

	const [newMovie, setNewMovie] = useState({
	title: '',
	description: '',
	imgUrl: '',
	imdbUrl: '',
	imdbId: '',
	});
	const [newMovie, setNewMovie] = useState(initialMovieState);

[anastasiia-tilikina]

let's rename this var to something like isAllFieldsFilled
And read this article about naming boolean variables)

[anastasiia-tilikina]

remove commented code

[Viktor-Kost]

Approved)
Yet please apply that recommendation Anastasiia asked

[Viktor-Kost]

isn't fixed. Create a variable outside the component and reuse it

const initialMovieState = {
  title: '',
  description: '',
  imgUrl: '',
  imdbUrl: '',
  imdbId: ''
}

Suggested change

	const [newMovie, setNewMovie] = useState({
	title: '',
	description: '',
	imgUrl: '',
	imdbUrl: '',
	imdbId: '',
	});
	const [newMovie, setNewMovie] = useState(initialMovieState);

[Viktor-Kost]

Suggested change

	setNewMovie({
	title: '',
	description: '',
	imgUrl: '',
	imdbUrl: '',
	imdbId: '',
	});
	setNewMovie(initialMovieState);