For deleting items in state, you should'nt do any of them shift() ,pop(), splice() to the state directly.

So how to do that?
just same as adding items in the state!
update!!!!

Check the exist items

First we have to check the existing list before delete it!!

• Look up the App.js! there is module <Ninjas /> with attribute ninjas, which is this.state.ninjas

App.js

import React from "react";
import Ninjas from "./Ninjas";
import AddNinjas from "./AddNinja";
import "./App.css";

export default class App extends React.Component {
  state = {
    ninjas: [
      { name: "Ryu", age: 30, belt: "black", id: 1 },
      { name: "Yoshi", age: 20, belt: "green", id: 2 },
      { name: "Crystal", age: 25, belt: "pink", id: 3 },
    ],
  };

  render() {
    return (
      <div className="App">
        <h1>My first React app!</h1>
        <p>Welcome :)</p>
        <Ninjas ninjas={this.state.ninjas} />
      </div>
    );
  }
}

Then we go Ninjas.js

• the module Ninjas take the props. There is various way to take props.

Ninjas.js

import React from "react";

const Ninjas = (props) => {
  // generate name, age, belt.
  const { name, age, belt } = this.props;
  // set the props as a ninjas
  const { ninjas } = this.props;
}

or

import React from "react";

const Ninjas = ({ ninjas }) => {
  // this set the props as a ninjas
}

after set the variable as a ninjas you can use .map() method to show each ninja with jsx.
However, here is very important matters! key!!!
if you want to for loop for the items, in case for using each item in the future, you have to generate key for each items. This is react basic recommendations! except that, it works anyway, but you can get the warning message from the console.

• we can generate ninjaList from for Loop on props, ninjas, which create jsx list showing each ninja status.

• last we create materials for showing items by {ninjaList} on return section.

const Ninjas = ({ ninjas }) => {
  const ninjaList = ninjas.map((ninja) => {
     return (
       <div className="ninja" key={ninja.id}> // important!!!
         <div>Name: {ninja.name} </div>
         <div>Age: {ninja.age} </div>
         <div>Belt: {ninja.belt} </div>
      </div>
     );
  });
  

  return <div className="ninja-list">{ninjaList}</div>;
};

filtering the list

if you want to show filtering list such as over age 20
you can use if...else statement!

Ninjas.js

const Ninjas = ({ ninjas }) => {
   const ninjaList = ninjas.map((ninja) => {
   if (ninja.age > 20) {
     return (
       <div className="ninja" key={ninja.id}>
         <div>Name: {ninja.name} </div>
         <div>Age: {ninja.age} </div>
         <div>Belt: {ninja.belt} </div>
       </div>
     );
   } else {
     return null;
   }
});

  return <div className="ninja-list">{ninjaList}</div>;
};

export default Ninjas;

Delete the item!

let's check the Ninjas.js first!
The difference from the former one is <button> with onClick for executing the function like props deleteNinja.
But as you know, we shouldn't use function() because it executed when pages loaded.
However we have to use deleteNinja() with argument ninja.id.
So that's why we should use empty function ()=> {deleteNinja(ninja.id)}.
As you know ninja.id is unique separator for the state.

Again, technically deleteNinja() doesn't directly point out deleteNinja() function in App.js but the deleteNinja props

Ninjas.js

import React from "react";
import "./Ninjas.css";

const Ninjas = ({ ninjas, deleteNinja }) => {
  const ninjaList = ninjas.map((ninja) => {
    return ninja.age > 20 ? (
      <div className="ninja" key={ninja.id}>
        <div>Name: {ninja.name} </div>
        <div>Age: {ninja.age} </div>
        <div>Belt: {ninja.belt} </div>
        <button
          onClick={() => {
            deleteNinja(ninja.id);
          }}
        >
          Delete ninja
        </button>
      </div>
    ) : null;
  });

  return <div className="ninja-list">{ninjaList}</div>;
};

export default Ninjas;

Here comes App.js.

• we call deleteNinja props from Ninjas.js which is call this.deleteNinja method in App.js

• We will get an argument id which is comes as the ninja.id from Ninjas.js.

• As mentioned first graph of this article, there is no delete but update by setState().

• So, we can .filter() method for generating new list without the one going to be removed.

Then, reassign the current state by setState()