I built a todo list app with React Hooks 😎

useCaptainHook 🎉

Excellent job! It’s great that you’re happy to post your code in public.

You’ve had some good feedback already and I don’t have anything to add, but I wanted to reply to say that you’re doing great! Keep it up!!

Nice work Josh.

One thing I wish I had learned earlier is the concept of normalized state.
Instead of storing your tasks in an array, store them in an object.
That way, reads/edits are fast and easy.

e.g.

tasks= {
  taskId1:  { title: "Here is a task", completed: true },
  taskId2:  { title: "Another task", completed: false },
  ...
};

Then getting a value is as easy as tasks[taskId].title

Setting/editing values is easy too, you don't have to do any array manipulations.

Since objects don't have order, you can have another array to keep track of order
e.g.

tasksArray= [taskId1, taskId2, ... ]

Then producing the list is easy:

tasksArray.map(taskId =>
<div>
{tasks[taskId].title}
</div>
);

This is very useful once your state becomes larger and/or more complex.

See: https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape

Hi Josh, nice project! :)

Very good job, and really brave to share the source code. Adding the date and time for each task might be a big advantage, but I'm not sure if you would like to develop your product in that direction.

Congrats! Will give it try for preparing our launch with paperless.io

Nicely done, thanks for sharing!

Nice job! It takes some courage to post a source code, especially when you are learning something new.

Keep going :)

When I add a new item the number of tests to complete increments, but the item doesn't show in the list.

UI is nice, I'd suggest making the 'complete' and 'X' buttons a bit nicer to match the rest of your design, check out Feather Icons for React - might be useful.