So we'll start by adding an updateTodo function in TodoList with some dummy text for now, which we'll update later. So that means that TodoList needs to pass a function down to TodoItem, so that it can call that function. That means we need to have an onClick handler for the button and an onChange handler for the input element.īut then we need a way to pass those changes back up to the parent TodoList component. First, inside our TodoItem component, we need to be able to make changes to this data. We have a couple of different things we need to do here. Start by forking the original CodePen and giving it a different name, e.g. And that's your challenge! Here's the CodePen with all of the source code for you to work with.įork the pen and try to figure out your own solution! Or read on and I'll walk you through it below. And I can still select text in the input fields and, if I could actually make changes, it would be editableĪll of that needs to be wired up correctly. If I click Finish, the text on the button doesn't change as it should. So if I try to make changes in these input elements, nothing happens.
Right now, it's rendering just fine over on the right side, but we can't actually change these things in the state of our TodoList component. Then we have a button which we can use to "Finish" or "Unfinish" a task. If this to-do item is done then the value is not editable-it's read-only.
Then in the TodoItem component, we just render a list item with an input box which has the value. Then we can render our list of to-do items in the TodoItem component. The TodoList component just has a list of to-dos in its state, and each one has a text property and a done property. We have two components already built: a TodoList component and a TodoItem component. In this challenge, you're going to create a basic to-do list app in React.
0 kommentar(er)
