movies-list-add-form

[Q1W2E3R4T5Y6U7I8a]

DEMO LINK

[etojeDenys]

something wrong with your link, feel free to ask for some help with that in the chat

[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

[nazarmatsevych]

demo link doesn't work, try to rerun "npm run deploy" command or ask for help in fe_chat

[maxim2310]

Good work, but lets make some improvement

form works strange, errors appear in different places and dont added new film after submit
https://www.loom.com/share/ef26224b8df14f3a8dcbd0ec67dbb511

[Viktor-Kost]

move an initial state to a variable

Suggested change

	export const NewMovie: React.FC<Props> = ({ onAdd }) => {
	const [count, setCount] = useState(0);
	const [newMovie, setNewMovie] = useState({
	title: '',
	description: '',
	imgUrl: '',
	imdbUrl: '',
	imdbId: '',
	});
	const initialMovieState = {
	title: '',
	description: '',
	imgUrl: '',
	imdbUrl: '',
	imdbId: '',
	}
	export const NewMovie: React.FC<Props> = ({ onAdd }) => {
	const [count, setCount] = useState(0);
	const [newMovie, setNewMovie] = useState(initialMovieState);

[Viktor-Kost]

Suggested change

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