Figuring out which todo component was being clicked on turned out to be trickier than expected. When a todo item is checked or a button is clicked, I wanted to update the corresponding todo. Now, when I pass in the actual function that does the editing work as the prop editTask to the todo component, I can access the new value and update my todo accordingly.ĭetermining Which todo Was Being Accessed Then, I could pass the into that function like so: The solution was to first setup an editTask prop that would handle the actual editing in the parent component todolist. We have to find a way to get that same effect without using state in our todo component. If todo had state, you could do something like this (grossly simplified): First, the todo items obviously had to be editable after they were created since that’s a pretty basic functionality of a todo list. In this case, for the todo list piece, the state was held in todolist. Mainly, it’s just easier to manage the application when the state is held in just one top-level component. I wanted to keep the basic todo component stateless within the application for a few reasons. Gotchas and Things That Made My Head Hurt I wanted to breakdown some of the trickier elements I ran into along with some next steps that I’m taking in particular. At this point, I’ve gotten what I wanted out of the project so it’s time to put it out in the wild and move on. The goal of the project was always to learn about React (with everyone’s first project-a todo list).
It’s not perfect, and I’m sure there are some improvements I could make. On Friday, I put some finishing touches on Theodoro (I know-terrible name) a React-based Pomodoro timer and todo list project I’ve been working on. We’re close to half-way through the year already, but I finally shipped a thing-a simple React todo list! Let todosCopy = of my goals for 2016 was to ship stuff, quite a few things in fact. Here is my code: const TodoInput = props =>× THEN I see the list that I saw on the page before I refreshed THEN the list item disappears from the page THEN I see the text appear in the list belowĪND I click the close button next to a list item I have made a small app in React that fulfils the following user stories: GIVEN I add an item using the form
0 kommentar(er)
