naxcardio.blogg.se - React todolist app

Style application using React-Bootstrap or CSS-in-JS.Create a backend so your To Do List can persist.Give the ability to sort the list by the due date or priority.Add the ability to create a due date for each task or a priority rating.Here are some extra things you can do to give you some ideas: If you found this to be fairly straightforward, play around with the code a bit and try to implement more functionality.

Make sure you pass addTask as props down to the ToDoForm.Ĭheck out the complete code I used in this application hereĬongrats! You’ve now made a to do list using React hooks. SetToDoList(mapped) is analogous to tState() We can find the id of the current target and then flip the task to complete or not complete depending on the Boolean already passed in. Mapping over the toDoList creates a new array. When looking at older React legacy code, most likely you will see something like the following:įor this function, I passed in the id of the item that was clicked. This hook replaces the need for a state object in a class component structure. The only hook we will need for this particular to do list project is useState().

Separating your app’s concerns based on logic.

Sharing stateful logic without render props or higher-order components.

Isolating stateful logic, making it easier to test.

useCallback: pass an inline callback and an array of dependencies.

useContext: accepts a context objects and returns current context value.

useEffect: perform side effects from function components.

When you take an initial look at the React Hooks documentation, you’ll see that there are several Hooks that we can use for our applications. This allows you to use React without classes. In React, hooks are functions that allow you to hook into React state and lifecycle features from function components.