diff --git a/src/components/TodoForm/TodoForm.tsx b/src/components/TodoForm/TodoForm.tsx index c1712aadc5..0414c62fd0 100644 --- a/src/components/TodoForm/TodoForm.tsx +++ b/src/components/TodoForm/TodoForm.tsx @@ -10,13 +10,14 @@ type Props = { export const TodoForm: React.FC = ({ onSubmit }) => { const [title, setTitle] = useState(''); - const [hasTitleError, setHasTitleError] = useState(false); + const [titleErrorMessage, setHasTitleErrorMessage] = useState(''); + const [userId, setUserId] = useState(0); const [hasUserIdError, setHasUserIdError] = useState(false); const handleTitleChange = (event: React.ChangeEvent) => { setTitle(event.target.value); - setHasTitleError(false); + setHasTitleErrorMessage(''); }; const handleUserIdChange = (event: React.ChangeEvent) => { @@ -27,17 +28,22 @@ export const TodoForm: React.FC = ({ onSubmit }) => { const reset = () => { setTitle(''); setUserId(0); - setHasTitleError(false); + setHasTitleErrorMessage(''); setHasUserIdError(false); }; const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); - setHasTitleError(!title); setHasUserIdError(!userId); - if (!title || !userId) { + if (!title) { + setHasTitleErrorMessage('Please enter a title'); + } else if (!title.trim()) { + setHasTitleErrorMessage('Title should have not only spaces'); + } + + if (!title || !title.trim() || !userId) { return; } @@ -65,7 +71,9 @@ export const TodoForm: React.FC = ({ onSubmit }) => { onChange={handleTitleChange} /> - {hasTitleError && Please enter a title} + {titleErrorMessage && ( + {titleErrorMessage} + )}