How to make an edit option for my ToDo List application?

Active3 hr before
Viewed126 times

9 Answers


Stack Overflow Public questions & answers ,Thanks for contributing an answer to Stack Overflow!, Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

Note: I assume that Your todo object looks like this

   index: 1
   text: "string"
load more v

Now lets setup an onChange handler for the new input we will create in the next step. ,Lets start with when a user clicks on the "Edit" button. We want the "Update" button and "Cancel" button, and change from the add todo input to the editing input. , The editing form has a couple additional buttons so the user can control what they would like to do

  // boolean state to know if we are editing (this will let us display 
  // different inputs based on a condition (conditional rendering)
  const [isEditing, setIsEditing] = useState(false);
  // object state to set so we know which todo item we are editing
  const [currentTodo, setCurrentTodo] = useState({});
load more v

Sometimes in our application, we might need to display to the user an inline-edit feature, inline editing allows a user to edit content while still on the same page. I am going to be showing how to do this with a simple Todo-app.,Go into your src/ and create a file named Example.jsx. We create a simple component with an…,Let’s create a react-app called todo-app using the react CLI.

Let’s create a react-app called todo-app using the react CLI.

$ npx create - react - app todo - app

With the current status of our app, we can add todos items, unmark/mark completed and as well as delete items. That’s is fine for a simple todos application.,Save the file and test your work. Now the todos app works as intended.,Still, we were not able to edit the todos items.

return (
  <li className={styles.item}>
    <div onDoubleClick={this.handleEditing}>...</div>  </li>
load more v

8. Edit a task's content ,And this is the order in which you will be implementing the application. Additionally, you will create GraphQL operations first, then pages that will trigger them.,After deleting a list, the user will be redirected to the homepage.

 Pretag team - issue, fix, solve, resolve

Comprehensive tutorial for making a React todo list using Hooks. Learn how to create, display, delete, complete, edit, save, and load todos. Great beginner web development tutorial when first learning React.,← How to Build a Stopwatch Timer using React Hooks,React Hooks Introduction - useState and useEffect →

load more v

Select any task list from all task-lists.,A window will pop up from where you can make necessary changes to the task.,Click on the menu icon from right and choose Edit option. A window will pop up from where you can make any changes.

 Pretag team - issue, fix, solve, resolve

Lastly, we are clearing the value of our input element to make room for the next todo item. What may be less boring is this line here:,Right now, we have our input field and submit button showing up. These two UI elements neither work nor look all that visually appealing. We'll fix that up in a little bit, but first let's talk about how we are going to add the rest of the app's functionality.,This is going to be a fun exercise where we build each part of the app and learn (in awesomely painstaking detail) how the various little things work along the way.

 Pretag team - issue, fix, solve, resolve

Now our todo list app actually looks a bit more like a real app! The problem is: it doesn’t actually do anything. We’ll start fixing that in the next chapter!,Getting started with Vue,Getting started with CSS

# Move into the src directory of your project
cd src
# Delete a few files
rm--App.test.js App.css logo.svg serviceWorker.js setupTests.js
# Move back up to the root of the project
load more v

Other "option-undefined" queries related to "How to make an edit option for my ToDo List application?"