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

CodePudding user response：

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
    });
  });
};

CodePudding user response：

You have to change a little in your code. -------- return index !== e.index - 1;------------ You can take by e.index. Thank you.

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.index - 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>
    </>
  );
}