solved version 2

src/App.tsx

@@ -13,10 +13,10 @@ export type Movie = {
 };
 
 export const App = () => {
-  const [movies, setMovie] = useState([...moviesFromServer]);
+  const [movies, setMovies] = useState([...moviesFromServer]);
 
   const onAdd = (movie: Movie) => {
-    setMovie(currentMovies => [...currentMovies, movie]);
+    setMovies(currentMovies => [...currentMovies, movie]);
   };
 
   return (

src/components/NewMovie/NewMovie.tsx

@@ -40,38 +40,38 @@ export const NewMovie: React.FC<Props> = ({ onAdd }) => {
         name="title"
         label="Title"
         value={title}
-        onChange={setTitle}
+        onChange={value => setTitle(value)}
         required
       />
 
       <TextField
         name="description"
         label="Description"
         value={descr}
-        onChange={setDescr}
+        onChange={value => setDescr(value)}
       />
 
       <TextField
         name="imgUrl"
         label="Image URL"
         value={img}
-        onChange={setImg}
+        onChange={value => setImg(value)}
         required
       />
 
       <TextField
         name="imdbUrl"
         label="Imdb URL"
         value={url}
-        onChange={setUrl}
+        onChange={value => setUrl(value)}
         required
       />
 
       <TextField
         name="imdbId"
         label="Imdb ID"
         value={id}
-        onChange={setId}
+        onChange={value => setId(value)}
         required
       />
 

src/components/TextField/TextField.tsx

@@ -14,9 +14,6 @@ function getRandomDigits() {
   return Math.random().toFixed(16).slice(2);
 }
 
-const pattern =
-  /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@,.\w_]*)#?(?:[,.!/\\\w]*))?)$/;
-
 export const TextField: React.FC<Props> = ({
   name,
   value,
@@ -31,7 +28,6 @@ export const TextField: React.FC<Props> = ({
   // To show errors only if the field was touched (onBlur)
   const [touched, setTouched] = useState(false);
   const hasError = touched && required && !value;
-  const [validMessage, setValidMessage] = useState('');
 
   return (
     <div className="field">
@@ -50,23 +46,11 @@ export const TextField: React.FC<Props> = ({
           placeholder={placeholder}
           value={value}
           onChange={event => onChange(event.target.value)}
-          onBlur={() => {
-            setTouched(true);
-            if (
-              (name === 'imgUrl' || name === 'imdbUrl') &&
-              !pattern.test(value)
-            ) {
-              console.log(pattern.test(value));
-              setValidMessage('Not valid URL');
-            } else {
-              setValidMessage('');
-            }
-          }}
+          onBlur={() => setTouched(true)}
         />
       </div>
 
       {hasError && <p className="help is-danger">{`${label} is required`}</p>}
-      {validMessage && <p className="help is-danger">{`Not valid URL`}</p>}
     </div>
   );
 };