-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Task solution (read description) #2894
base: master
Are you sure you want to change the base?
Conversation
Some checks were not successful. I'll fix that asap |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good work 👍
But pay attention to naming
src/App.tsx
Outdated
})); | ||
|
||
export const App: React.FC = () => { | ||
const [listTodo, updateTodoList] = useState(todos); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const [listTodo, updateTodoList] = useState(todos); | |
const [todoList, setTodoList] = useState(todos); |
Developers have a convention on how to name use state https://react.dev/reference/react/useState
src/App.tsx
Outdated
updateTodoList([ | ||
...listTodo, | ||
{ userId, id, title, user: getUserById(userId), completed: false }, | ||
]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When you set state depending on the previous one use functional setState
setTitle(title.replace(/[^a-zA-Z0-9 ]/g, '')); // I just didn't want to create a cycle for deleting characters | ||
} // So I googled this expression |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you have a regex create a variable for it and put comments close to it
const [titleHasError, setTitleError] = useState(false); | ||
const [userHasError, setUserError] = useState(false); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fix naming, in accordance with convention and boolean variables should start from is
or has
resetForm(); | ||
}; | ||
|
||
const titleValidation = (title: string) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const titleValidation = (title: string) => { | |
const validateTitle = (title: string) => { |
Function name should start from verb
onChange={event => { | ||
setTitle(event.target.value); | ||
titleValidation(event.target.value); | ||
setTitleError(false); | ||
}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Create a function instead of passing anonim one to onChange
- You
setTitle
in the validation function
onChange={event => { | ||
setUserId(+event.target.value); | ||
setUserError(false); | ||
}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Create a function
My tests are completely broken because of a mysterious issue — I'm still getting the error "Failed to fetch the module...". So, idk, if it passes the test or not. I compared my code to others and it should work fine...
At least the demo seems to be fine.
DEMO LINK