solution #2720
solution #2720
Conversation
There was a problem hiding this comment.
Great job on implementing the core functionality! 🎉 There are a few minor improvements you could consider, such as renaming the movies state for clarity and ensuring TextField handles onBlur validation. Also, you can optimize by removing the unnecessary spread operator when initializing the movies state. Keep up the good work and happy coding! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
|
|
||
| export const App = () => { | ||
| const [movies, setMovies] = useState<Movie[]>([...moviesFromServer]); |
There was a problem hiding this comment.
You are using the spread operator to create a copy of moviesFromServer when initializing the movies state. According to the checklist, if you are using a non-mutating array method, you don't need to create a copy of the array. Consider removing the spread operator: useState<Movie[]>(moviesFromServer);.
| type InputTypes = 'title' | 'description' | 'imgUrl' | 'imdbUrl' | 'imdbId'; | ||
|
|
||
| export const NewMovie: FC<Props> = ({ onAdd }) => { | ||
| const [count, setCount] = useState(0); |
There was a problem hiding this comment.
The count state is used to reset the form by changing the key, which is a good approach to ensure the form is reinitialized. Ensure that the TextField component handles the onBlur event to validate inputs as per the task description.
| const [movies, setMovies] = useState({ | ||
| title: '', | ||
| description: '', | ||
| imgUrl: '', | ||
| imdbUrl: '', | ||
| imdbId: '', | ||
| }); |
There was a problem hiding this comment.
Consider renaming the movies state to something more descriptive like movieDetails to avoid confusion, as it represents a single movie's details rather than multiple movies.
|
|
||
| export const NewMovie: FC<Props> = ({ onAdd }) => { | ||
| const [count, setCount] = useState(0); | ||
| const [movies, setMovies] = useState({ |
There was a problem hiding this comment.
| const [movies, setMovies] = useState({ | |
| const [movie, setMovie] = useState({ |
DEMO LINK