This is the code,
import "./styles.css"; import Ank from "./Ank"; import { useState, useRef, useEffect } from "react"; export default function App() { const [array, setArray] = useState( JSON.parse(localStorage.getItem("notes")) ?? [] ); useEffect(() => { localStorage.setItem("notes", JSON.stringify(array)); }, [array]); const Add = () => { setArray((e) => { return [...e, one.current.value]; }); }; const deleting = (e) => { setArray((e1) => { return e1.filter((e2, index) => { return index !== e - 1; }); }); }; const one = useRef(null); return ( <> <div className="App"> <h1>Hello CodeSandbox</h1> <div className="align"> <input ref={one} /> <br /> <br /> <button onClick={Add}>Add</button> </div> <div className="align"> {array.map((e, index) => { return ( <Ank key={index} onSelect={deleting} index={index + 1} name={e} /> ); })} </div> </div> </> ); }
Please check the function deleting
in the filter section I am trying to delete the elemt from the array
using setarray
.
This is the codesandbox link
https://codesandbox.io/s/silly-neumann-b0foos?file=/src/App.js:0-1072
Advertisement
Answer
e
is an object having index
as prop… so its e.index
const deleting = (e) => { setArray((e1) => { return e1.filter((e2, index) => { return index !== e.index - 1; // here }); }); };