0

I am trying to dismiss an item from my array which I have mapped out. I made the onclick button, binded it, and defined the function. However, when I press the dismiss button, the items are still there

I tried to change my object id to different name, change some of the code. I even console.log to see whether my button was working. It was. Just it wasnt deleting the intended item.

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;

I want the item to be deleted once i press the dismiss button. And bring back the updated list which will be brought about from the setState

Kenny Quach
  • 125
  • 1
  • 1
  • 9
  • `this.setState` is async. Use the [optional callback](https://reactjs.org/docs/react-component.html#setstate): `this.setState({animals: updatedList}, () => console.log(this.state.animals));` – Andy Jan 12 '19 at 18:43
  • @Andy you sure that is the issue, he said that it was not deleting the correct item, which should have been done regardless of the log. I'd wager its more of an issue with `.this` context being wrongly bound with a non-bound reference in the method itself – Dellirium Jan 12 '19 at 18:45
  • He's trying to log state to console immediately after setting it. – Andy Jan 12 '19 at 18:46
  • Disregard the console.log entirely, it is a "i want to see if my button is working" self-test, his main issue is the button is not working, rather then "it logs the wrong state", at least that is how i understood it – Dellirium Jan 12 '19 at 18:47
  • @Andy Please see my answer. The question you referenced when marking this as a duplicate is not related to Kenny's problem. In Kenny's case it was never reflecting the new state in the rendering because he wasn't using the state. – Ryan Cogswell Jan 12 '19 at 18:55

1 Answers1

1

Your render method is using animals (your initial data) instead of this.state.animals.

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
  • You are absolutely right! I had forgotten to add "this.state" in front of my dogs.map since I had later set the array to go into the state. Thanks! – Kenny Quach Jan 12 '19 at 19:12