task done #2101
task done #2101
Conversation
| const [title, setTitle] = useState(''); | ||
| const [description, setDescription] = useState(''); | ||
| const [imgUrl, setImgUrl] = useState(''); | ||
| const [imdbUrl, setImdbUrl] = useState(''); | ||
| const [imdbId, setImdbId] = useState(''); |
There was a problem hiding this comment.
you can use object with type Movie and create only one state for all fields.
const InitialFieldsOfMovie: Movie = {
title: '',
description: '',
imgUrl: '',
imdbUrl: '',
imdbId: '',
};
// your code
const [fieldsOfMovie, setFieldsOfMovie] = React.useState(InitialFieldsOfMovie);I think it's easier to use because you don't have to create a lot of states for each field, but your solution is also suitable (It is not necessary to change)
There was a problem hiding this comment.
We ask about this our teacher Misha and he said that it is not better.
src/components/NewMovie/NewMovie.tsx
Outdated
| const [imdbUrl, setImdbUrl] = useState(''); | ||
| const [imdbId, setImdbId] = useState(''); | ||
|
|
||
| const isAbleToAdd = title && imgUrl && imdbUrl && imdbId; |
There was a problem hiding this comment.
Don't forget to trim() value, because now I able to add "empty" movie
| <form className="NewMovie" key={count}> | ||
| <form | ||
| className="NewMovie" | ||
| key={count} |
There was a problem hiding this comment.
Why you need to add this key attribute? Why you need to reset "touched status"? Can you explain please?
There was a problem hiding this comment.
We use this key to rerender component with clear field
I use touched status to controll if field was used then clear and trying to switch to another field (I show error in this case)
src/App.tsx
Outdated
| import './App.scss'; | ||
| import { MoviesList } from './components/MoviesList'; | ||
| import { NewMovie } from './components/NewMovie'; | ||
| import moviesFromServer from './api/movies.json'; | ||
|
|
||
| export const App = () => { | ||
| const [preparedMovies, setPreparedMovies] = useState(moviesFromServer); | ||
| // const addNewMovie |
src/App.tsx
Outdated
| <NewMovie onAdd={(movie) => { | ||
| setPreparedMovies(currentList => [...currentList, movie]); | ||
| }} |
There was a problem hiding this comment.
you can write a handler for it ( not critical )
src/components/NewMovie/NewMovie.tsx
Outdated
| // Increase the count after successful form submission | ||
| // to reset touched status of all the `Field`s |
There was a problem hiding this comment.
Think you can remove it ( not critical )
| setTitle(''); | ||
| setDescription(''); | ||
| setImgUrl(''); | ||
| setImdbUrl(''); | ||
| setImdbId(''); |
src/components/NewMovie/NewMovie.tsx
Outdated
| <form | ||
| className="NewMovie" | ||
| key={count} | ||
| onSubmit={addNewMovie} // (event) => {}, f(event) |
DEMO LINK