- Replace
<your_account>
with your Github username in the DEMO LINK - Follow the React task guideline
- Use React TypeScript cheat sheet
Implement ability to add TODOs to the TodoList
implemented in Static list of todos
- Create
App
component storingtodos
array and displaying it usingTodoList
- Create a form to add new TODOs
- DON'T create a separate component for the form (later we will learn how to do it)
- there should be a text input for the
title
- also add a
<select>
with all the users from./src/api/users.js
- add labels and placeholders where they are needed
- the
TODO
should be added to the list after clickingAdd
button - each TODO should have
id
,title
anduserId
id
is a maximalid
in the array + 1
- Clear the form after adding a TODO
- Add a validation to the form
- add an empty option
Choose a user
to the users select - before creating a todo check if a
user
was selected, if not show an error message next to theselect
(Please choose a user
) - if the
title
is empty show an error message next to thetitle
field (Please enter the title
) - errors should appear only after pressing
Add
button - hide a message immediately after any change of the field with an error
- add an empty option
- (* Optional) Limit characters displayed in the
title
field. Allow entering letters (ru
anden
), digits andspaces
.