I was watching a tutorial on how to make todos, though my main focus was local storage use.

But when he made the delete button then I was a bit confused, the code below shows how he did it but I am not getting it.

Can anyone explain that I tried using the splice method to remove items from the array but I am not able to remove the items from the page?

Can you also suggest what should I do after using splice to return the array on the page?

Below is the code,

import "./styles.css";
import { useState, useEffect } from 'react'
import Todoform from './TodoForm'
export default function App() {
  const [list, setlist] = useState("");
  const [items, setitems] = useState([])
  const itemevent = (e) => {
    setlist(e.target.value);
  }
  const listofitem = () => {
    setitems((e) => {
      return [...e , list];
    })
  }
  const deleteItems = (e) => {
    // TODO: items.splice(e-1, 1);

    //  Is there any other way I can do the below thing .i.e 
    //  to remove todos from page.
    // this is from tutorial
    setitems((e1)=>{
      return e1.filter((er , index)=>{
        return index!=e-1;
      })
    })
  }
  return (
    <>
      <div className='display_info'>
        <h1>TODO LIST</h1>
        <br />
        <input onChange={itemevent} value={list} type="text" name="" id="" />
        <br />
        <button onClick={listofitem} >Add </button>
        <ul>
          {
            items.map((e, index) => {
              index  ;
              return (
                <>
                  <Todoform onSelect={deleteItems} id={index} key={index} index={index} text={e} />
                </>
              )
            })
          }
        </ul>
      </div>
    </>
  )
}

And this is the TodoForm in this code above,

import React from 'react'
export default function Todoform(props) {
const { text, index } = props;
  return (
    <>
      <div key={index} >
        {index}. {text}
        &nbsp;&nbsp; <button onClick={() => {
          props.onSelect(index)
        }} className="delete">remove</button>
      </div>
    </>
  )
}

Here is the codeSandbox link

https://codesandbox.io/s/old-wood-cbnq86?file=/src/TodoForm.jsx:0-317

CodePudding user response：

I think one issue with your code example is that you don't delete the todo entry from localStorage but only from the components state.

You might wanna keep localStorage in sync with the components state by using Reacts useEffect hook (React Docs) and use Array.splice in order to remove certain array elements by their index (Array.splice docs).

// ..

export default function App() {
  const [list, setlist] = useState("");
  const [items, setitems] = useState([])

  /* As this `useEffect` has an empty dependency array (the 2nd parameter), it gets called only once (after first render).
     It initially retrieves the data from localStorage and pushes it to the `todos` state. */
  useEffect(() => {
    const todos = JSON.parse(localStorage.getItem("notes"));
    setitems(todos);
  }, [])

  /* This `useEffect` depends on the `items` state. That means whenever `items` change, this hook gets re-run.
     In here, we set sync localStorage to the current `notes` state. */
  useEffect(() => {
    localStorage.setItem("notes", JSON.stringify(items));
  }, [items])

  const itemevent = (e) => {
    setlist(e.target.value);
  }

  const listofitem = () => {
    setitems((e) => {
      return [...e , list];
    })
  }

  const deleteItems = (index) => {
    // This removes one (2nd parameter) element(s) from array `items` on index `index`
    const newItems = items.splice(index, 1)

    setitems(newItems)
  }

  return (
    <>
      {/* ... */}
    </>
  )
}

CodePudding user response：

There are multiple ways to remove an item from a list in JS, your version of splicing the last index is correct too and it is able to remove the last item. What it can't do is update your state.

His code is doing two things at the same time: Removing the last item of the Todo array and then, setting the resulted array in the state which updates the todo list.

So, change your code as

const deleteItems = (e) => {
  let newItems = [...items];
  newItems.splice(e-1, 1);
  setitems(newItems);
}