Breaking News: Grepper is joining You.com. Read the official announcement!

how to update todo list in react js

Abdul Haseeb Siddiqui answered on January 10, 2023 Popularity 10/10 Helpfulness 4/10

answer how to update todo list in react js

how to update todo list in react js

Comment

TODO-in-REACT

import "./App.css";
import { useState } from "react";

function App() {
  const [text, settext] = useState("");
  const [tasks, settasks] = useState([]);
  const [editBtn, seteditBtn] = useState("Edit");

  let handleOnChange = (val) => {
    settext(val.target.value);
  };
  let addTsks = () => {
    settasks([...tasks, text]);
    settext("");
  };
  let deleteTasks = (id) => {
    let fltr = tasks.filter((val, indx) => {
      return indx !== id;
    });
    console.log(fltr);
    settasks(fltr);
  };

 let editFnc = (items,index) => {
  if(editBtn === "Edit"){
    seteditBtn("Update");
    settext(items)
    
  }else{
    seteditBtn("Edit");
    tasks.splice(index,1,text)
    settext("");
  }
 }

  return (
    <>
      <div className="App App-header">
        <h2> Todo List: </h2>
        <div>
          <input
            placeholder="Enter task here..."
            value={text}
            onChange={handleOnChange}
          />
          <button onClick={addTsks}>Add </button>
        </div>
        <div>
          {tasks.map((items, index) => {
            return (
              <p key={index}>
                {items}{" "}
                <button
                  onClick={() => {
                    editFnc(items,index);
                  }}
                >
                 {editBtn}
                </button>
                <button
                  onClick={() => {
                    deleteTasks(index);
                  }}
                >
                  Delete
                </button>
              </p>
            );
          })}
        </div>
      </div>
    </>
  );
}

export default App;

This includes creating, deleting and updating todo list items.

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript list todo

Link to this answer
Share Copy Link

Contributed on Jan 10 2023

Abdul Haseeb Siddiqui

0 Answers Avg Quality 2/10

how to update todo list in react js

Contents

More Related Answers

how to update todo list in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.