movies list add form v1 #1889
movies list add form v1 #1889
Conversation
src/App.tsx
Outdated
| imgUrl: string; | ||
| imdbUrl: string; imdbId: string; }) => { | ||
| setMovies(prevState => [...prevState, movie]); | ||
| }} |
There was a problem hiding this comment.
Consider moving type definitions outside JSX
src/components/NewMovie/NewMovie.tsx
Outdated
| }); | ||
|
|
||
| // [setTitle, setDescription, setImgUrl, setImdbUrl, setImdbId] | ||
| // .forEach(func => func('')); |
| export const App = () => { | ||
| const [movies, setMovies] = useState([...moviesFromServer]); |
There was a problem hiding this comment.
For what this spread operator, react created new array each render, and first value it's just default value which don't change moviesFromServer variable
src/components/NewMovie/NewMovie.tsx
Outdated
| 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.
Combine it into 1 state { title, description, ..... }
| @@ -1,5 +1,6 @@ | |||
| import classNames from 'classnames'; | |||
| import React, { useState } from 'react'; | |||
| // import { Movie } from '../../types/Movie'; | |||
src/components/NewMovie/NewMovie.tsx
Outdated
| const [movieDef, setMovieDef] = useState({ | ||
| title: '', | ||
| description: '', | ||
| imgUrl: '', | ||
| imdbUrl: '', | ||
| imdbId: '', | ||
| }); |
There was a problem hiding this comment.
move this object to a variable (outside NewMovie component)
const initialMovieState = {
title: '',
description: '',
imgUrl: '',
imdbUrl: '',
imdbId: '',
}
| const [movieDef, setMovieDef] = useState({ | |
| title: '', | |
| description: '', | |
| imgUrl: '', | |
| imdbUrl: '', | |
| imdbId: '', | |
| }); | |
| const [movieDef, setMovieDef] = useState(initialMovieState); |
src/components/NewMovie/NewMovie.tsx
Outdated
| setMovieDef({ | ||
| title: '', | ||
| description: '', | ||
| imgUrl: '', | ||
| imdbUrl: '', | ||
| imdbId: '', | ||
| }); |
There was a problem hiding this comment.
create a function reset and move this logic there. By the way, you can just pass initialMovieState
| const handleSubmit = (event: React.FormEvent) => { | ||
| event.preventDefault(); | ||
| setCount(prevState => prevState + 1); | ||
|
|
There was a problem hiding this comment.
before adding a movie you should validate values. Right now I can just press space for all form fields and submit a form
DEMO LINK