Проблема с отклонением позиции в реакции

Question

Я пытаюсь удалить элемент из моего массива, который я наметил. Я сделал кнопку onclick, связал ее и определил функцию. Тем не менее, когда я нажимаю кнопку отклонения, элементы все еще там

Я пытался изменить свой идентификатор объекта на другое имя, изменить часть кода. Я даже console.log, чтобы увидеть, работает ли моя кнопка. Это было. Просто это не было удаление намеченного элемента.

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



const animals = [
  { id: 1, species: "Bear", habitat: "Mountains" },
  { id: 2, species: "Lion", habitat: "Sahari" },
  { id: 3, species: "Hippo", habitat: "Sahari" },
  { id: 4, species: "Eagle", habitat: "Trees" },
  { id: 5, species: "Fish", habitat: "River" },
  { id: 6, species: "Snake", habitat: "Desert" },
  { id: 7, species: "Alligator", habitat: "Everglades" },

];

class App extends React.Component {


  constructor(props) {
    super(props);

    this.state = {
      animals: animals
    }
    this.onDismiss = this.onDismiss.bind(this);
  }

onDismiss(id) {
  const isNotID = animal => animal.id !== id;
  const updatedList = this.state.animals.filter(isNotID);
  this.setState({animals: updatedList});
  console.log(this.state.animals)
}

  render() {
    return(
      <div className="App">
        {
          animals.map((animal)=> {
            return (
              <div key={animal.id}>
                <div>{animal.species}</div>
                <div>{animal.habitat}</div>
                <span>
                  <button onClick={()=>this.onDismiss(animal.id)}>Dismiss</button>
                </span>
              </div>
            )
          })
        }
      </div>
    );
  }
}

export default App;

Я хочу, чтобы элемент был удален после того, как я нажму кнопку отклонения. И вернуть обновленный список, который будет вызван из setState

Answer 1

Ваш метод render использует animals (ваши исходные данные) вместо this.state.animals.