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

how to update todo list in react js

Add Answer

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

answer how to update todo list in react js

related start react app todo list

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

Closely Related Answers

start react app todo list

Comment

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  font-family: inherit;
  box-sizing: border-box;
}
html,
body {
  font-family: sans-serif;
  background-color: #0d0d0d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
}
button {
  cursor: pointer;
}
.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
  white-space: nowrap;
}
.text_large {
  font-size: 32px;
}
.text_small {
  font-size: 24px;
}
.wrapper {
  display: flex;
  flex-direction: column;
  width: 70%;
}
@media (max-width: 510px) {
  .wrapper {
    width: 100%;
  }
  header {
    justify-content: center;
  }
}
header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 42px;
}
.todohero_section {
  border: 1px solid #c2b39a;
  display: flex;
  align-items: center;
  justify-content: space-around;
  align-self: center;
  width: 90%;
  max-width: 455px;
  padding: 12px;
  border-radius: 11px;
}
.todohero_section div:last-child {
  background-color: #88ab33;
  width: 150px;
  height: 150px;
  border-radius: 75px;
  font-size: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.form {
  align-self: center;
  width: 97%;
  max-width: 455px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
}
.form label {
  width: 90%;
}
.form input {
  background-color: #1f2937;
  color: #fff;
  width: 100%;
  height: 50px;
  outline: none;
  border: none;
  border-radius: 11px;
  padding: 12px;
}
.form button {
  width: 10%;
  height: 50px;
  border-radius: 11px;
  background-color: #88ab33;
  border: none;
}
.todo_list {
  align-self: center;
  width: 97%;
  max-width: 455px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 27px;
  margin-bottom: 27px;
  gap: 27px;
}
.todo_item,
.edit-form input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  width: 100%;
  max-width: 455px;
  border: 1px solid #c2b39a;
  font-size: 16px;
  background-color: #0d0d0d;
  color: #fff;
  padding: 12px;
}
.edit-form input {
  outline: transparent;
  width: calc(100% - 14px);
  height: calc(100% - 12px);
  border: transparent;
}
.todo_items_left,
.todo_items_right {
  display: flex;
  align-items: center;
}
.todo_items_left {
  background-color: transparent;
  border: none;
  color: #fff;
  gap: 12px;
  font-size: 16px;
}
.todo_items_right {
  gap: 4px;
}
.todo_items_right button {
  background-color: transparent;
  color: #fff;
  border: none;
}
.todo_items_right button svg {
  fill: #c2b39a;
}

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: www.freecodecamp.org

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 03 2024

Unsightly Unicorn

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

Closely Related Answers

start react app todo list

Grepper

Documentation

Social

Legal

Contact

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