Task 2 react forms #2
Conversation
There was a problem hiding this comment.
- При попытке выбрать Gender: male, отоброжается сообщение "gender should be fill", при этом флажок на Male установлен. Установить Male можно только после того, как выбрал Female,а потом Male. Не очищается после сабмита формы
- Хотелось бы увидеть валидацию не только на обязательность заполнения, но и валидацию введенных данных. Например запретить вводить цыфры и специальные символы в поле Name.
- Если ввести в поле Name или Surname слишком длинную строку - ломается верстка карточки.
- Необходимо добалять node_module в gitignore. Добавить коментарии к коду в данной ситуации не представляется возможным.
| <div className="card"> | ||
| <div> | ||
| <span>Name: </span> | ||
| <span className="field">{Item.firstName}</span> |
There was a problem hiding this comment.
Лучше использовать деструктуризацию const { firstName, lastName, country ...} = Item Названия props обычно называются с маленькой буквы
| import { useState, useEffect } from 'react'; | ||
|
|
||
| export interface State { | ||
| firstName: string; |
There was a problem hiding this comment.
State не лучшее название для интерфейса
src/components/form.tsx
Outdated
|
|
||
| useEffect(() => { | ||
| const validate = () => { | ||
| setErrors({}); // сбрасываем ошибки |
There was a problem hiding this comment.
Комментарии на русском - плохая практика
| } | ||
| if ( | ||
| birthDate === '' || | ||
| birthDate > |
There was a problem hiding this comment.
Можно заменить birthDate === '' -> !birthDate
| setErrors((state) => ({ ...state, birthDate })); | ||
| } | ||
| if (gender === '') { | ||
| setErrors((state) => ({ ...state, gender })); |
There was a problem hiding this comment.
можно заменить gender === '' -> !gender
src/components/form.tsx
Outdated
|
|
||
| const handleSubmit = (event) => { | ||
| event.preventDefault(); | ||
| if (Object.keys(errors).length === 0) { |
There was a problem hiding this comment.
Не обязателельно сравнивать с 0: !Object.keys(errors).length
| gender, | ||
| }, | ||
| ]); | ||
| alert('data saved succesfully'); |
There was a problem hiding this comment.
Лучше не использовать allert, предупреждение eslint
| <option value="poland">Poland</option> | ||
| <option value="turkey">Turkey</option> | ||
| <option value="germany">Germany</option> | ||
| </select> |
There was a problem hiding this comment.
Лучше спользовать массив для генерации options
| <p> | ||
| I agree... | ||
| {errors?.agree !== undefined && ( | ||
| <span className="errors"> * agree should be check</span> |
There was a problem hiding this comment.
Сравнивать что либо с undefined - плохая идея
4 пункты выполнены по форме