Filter object from array where key "ID" == element.id not working

by

I have a React HTML5 drag and drop.

I m having an issue with the deleting of a list (card).

When I use the id from the event.target.parentnode.id I does not filter out that object for the list object array. If I manually put in the id to remove, it will work fine. What am I missing here?

Please excuse the messy code 🙂
This the snippet of code that handles the filter


  //remove list if user clicked the 'X'
    if (event.target.id == "remove_list") {
      //event.target.parentNode.id
      console.log("before", lists)
      const a = lists.filter(function (obj) {
        return obj.id !== event.target.parentNode.id;
      });
      setlists(a)
      console.log("after", lists)
      await Populate_list_containers()

    }

The full code is below for reference.

style.scss

.testing{

  $box_radius: 7px;
.board_area{

    background-color:rgba(199,221,255,255)
    ;
    height: 250px;
    width: 100%;
    padding:10px;
    display: flex;
    overflow:auto;
}

.list{
  padding:6px;
  text-align: center;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
    background-color:#ededed;
    min-height: 70px !important;
    width: 180 !important;
margin: 10px;
border-radius: $box_radius;
display: "flex";
}

.list_containter{
    background-color:rgba(128, 128, 128, 0.0);
    min-height: 70px !important;
    height: 100% !important;
    width: 200px !important;
    margin-left: 10px;
    overflow-y:auto;
    overflow-x:hidden;
    flex-shrink: 0;

    max-height: 100%;


}

.add_list{
  padding:5px;
border-radius: $box_radius;
  background-color:rgba(0, 0, 0, 0.1);
    height: 30px !important;
    width: 180px !important;
margin: 10px;
color: white;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
}

index.js

import "./style.scss"
import $ from 'jquery';
function main() {
  const [draging_element, setdraging_element] = useState(<div></div>)
  const [board, setboard] = useState(<div></div>)

  const [nameaa, setnameaa] = useState("a")

  const [lists, setlists] = useState(
  [
    {
      id: 1,
      name: "List 1"
    },
    {
      id: 2,
      name: "List2"
    }
  ]
  )

  var currentElement, currentDropzone, offsetX, offsetY;
  var test
  var dragging_element_save_state
  function findZoneUnderPoint(x, y) {
    var dropzones = document.querySelectorAll(".dropzone");
    for (var i = 0; i < dropzones.length; i++) {
      var box = dropzones[i].getBoundingClientRect();
      if (x > box.left && x < box.right && y > box.top && y < box.bottom) {
        return dropzones[i];
      }
    }
  }
  async function onMouseDown(event) {
    currentElement = event.target.closest(".draggable");
//remove list if user clicked the 'X'
if (event.target.id == "remove_list"){
  //event.target.parentNode.id
  console.log("before",lists)
  const a = lists.filter(function( obj ) {
    return obj.id !== event.target.parentNode.id;
});
setlists(a)
console.log("after",lists)
  await Populate_list_containers()
}else {
    //setdraging_element(currentElement)
    if (currentElement) {
      document.body.classList.add("noselect")
      var box = currentElement.getBoundingClientRect();
      currentElement.style.transform = "rotate(5deg)";
      offsetX = event.clientX - box.x;
      offsetY = event.clientY - box.y;
      currentElement.classList.add("drag");
      //currentElement.style.width = box.width.toFixed() + "px";
      // currentElement.style.height = box.height.toFixed() + "px";
     // currentElement.style.left = (event.clientX - offsetX) + "px";
    //  currentElement.style.top = (event.clientY - offsetY) + "px";
    currentElement.style.left =event.clientX-40
    currentElement.style.top = event.clientY-20
      currentElement.style.position = "fixed";
      currentElement.style.zIndex = "999";
      this.addEventListener("mousemove", onMouseMove);
      this.addEventListener("mouseup", onMouseUp);
      // setdraging_element(currentElement)
    }}
  }
  function onMouseMove(event) {
  //  document.body.style.cursor = "grabbing"

    currentElement.style.left = (event.clientX - offsetX) + "px";
    currentElement.style.top = (event.clientY - offsetY) + "px";
    var dropzone = findZoneUnderPoint(event.clientX, event.clientY);
    if (dropzone !== currentDropzone) {
      if (dropzone) {

        if (dropzone.childNodes[0] != currentElement) {
          //  console.log("in",)
          dropzone.childNodes[0].style.transform = "rotate(-5deg)";
          test = dropzone
        }
        // -> drag enter zone
      }
      if (currentDropzone) {
        if (currentDropzone.childNodes[0] != currentElement) {
          currentDropzone.childNodes[0].style.transform = "";
          //   console.log("out",currentDropzone.childNodes[0])
        }
        // -> drag leave zone
      }
      currentDropzone = dropzone;
    }
    // dropzone.style.transform = "rotate(-5deg)";
  }
  function onMouseUp(event) {
    if (test != undefined) {
      test.childNodes[0].style.transform = ""
    }
    document.body.classList.remove("noselect")
    currentElement.style.transform = "";
    currentElement.style.position = "relative";
    currentElement.style.left = 0
    currentElement.style.top = 0
    currentElement.style.cursor =""
    //console.log("this: ",test)
    var dropzone = findZoneUnderPoint(event.clientX, event.clientY);

    if (dropzone) {
      // -> drag complete
      if (dropzone.hasChildNodes) {
        // -> drag complete - Already has a list
        var origin_list_container = currentElement.parentNode
        var desitination_list = dropzone.childNodes[0]
        origin_list_container.append(desitination_list)
        dropzone.append(currentElement)
      }
      else {
        dropzone.append(currentElement)
        // -> drag complete - Does not have a list
      }
    }
    else {
      // -> drag canceled // Not in drop Zone
    }
    currentElement = null;
    document.removeEventListener("mouseup", onMouseUp);
    document.removeEventListener("mousemove", onMouseMove);

  }

  function Populate_list_containers() {
    var list_conatiners = lists.map(list =>
      <div id={"container_" + list.id} className="dropzone list_containter">
        <div id={list.id} className="draggable list">{list.name}
        <div id="remove_list"   style={{textAlign:"right",float: "right"}}>X</div>
        
        </div>
      </div>
    )
    var add_list = <input onKeyPress={testkeypress} id="add_list" placeholder='Add a list...' type="text" className="add_list"></input>
    setboard(<div style={{ display: "flex" }}>{list_conatiners}{add_list}</div>)
    //return 
  }
  const [count, setCount] = React.useState(0);

function testkeypress(event){
  if (event.key === "Enter") {

    var tempa =  {
      id:lists.length,
      name:event.target.value
          }
            lists.push(tempa)

            Populate_list_containers()

  console.log("before: ",event.target.value)
  event.target.value =''
  console.log("after: ",event.target.value)
  }
}

  useEffect(() => {
    let isMounted = true
    setCount(100);
    async function a() {
      await Populate_list_containers()
    }
    a()
  }, [count])
    // runs once on page load. Due to the '[]'
  //append(container)
document.addEventListener("mousedown", onMouseDown);
//console.log("sdsdsdruning again ")
  return <div className="testing">
    <div className="board_area">
      {board}


    </div>
  </div>

}

export default main;

69 thoughts on “Filter object from array where key "ID" == element.id not working”

  3. Amazing! This blog looks just like my old one! It’s
    on a completely different subject but it has pretty much the same layout and design. Wonderful choice of colors!

    Reply

  4. Hi there, I discovered your blog by means of Google whilst looking for a related matter, your web site came up, it
    appears good. I’ve bookmarked it in my google bookmarks.
    Hi there, just changed into aware of your blog thru Google, and located that it is
    truly informative. I’m going to watch out for brussels.
    I’ll appreciate in the event you continue this in future.

    A lot of people shall be benefited out of
    your writing. Cheers!

    Reply

  6. Greetings! Quick question that’s completely off topic.

    Do you know how to make your site mobile friendly?
    My site looks weird when browsing from my apple iphone. I’m
    trying to find a template or plugin that might be able to resolve this problem.
    If you have any recommendations, please share. With thanks!

    Reply

  9. Hello There. I discovered your weblog using msn. This is an extremely neatly written article.
    I’ll be sure to bookmark it and return to read more of your
    helpful information. Thank you for the post. I’ll definitely return.

    Reply

  11. My partner and I absolutely love your blog and find the majority of your post’s to be just
    what I’m looking for. Would you offer guest writers to write
    content for you personally? I wouldn’t mind
    creating a post or elaborating on some of the subjects you
    write with regards to here. Again, awesome web log!

    Reply

  12. Hi there just wanted to give you a quick heads
    up. The text in your post seem to be running off the screen in Ie.

    I’m not sure if this is a format issue or something to do with
    browser compatibility but I figured I’d post to let you know.
    The design look great though! Hope you get
    the issue fixed soon. Cheers

    Reply

  16. Simply desire to say your article is as amazing.
    The clarity on your put up is just spectacular and that i
    could assume you are a professional in this subject.
    Fine together with your permission allow me to snatch your RSS feed
    to keep updated with imminent post. Thank you a million and please carry
    on the gratifying work.

    Reply

  18. Hi! This is my first comment here so I just wanted to give a quick shout out
    and say I really enjoy reading through your posts. Can you recommend any other blogs/websites/forums that cover the
    same topics? Thanks for your time!

    Reply

  23. You’re so cool! I don’t think I have read anything like
    this before. So good to discover somebody with a few genuine thoughts on this subject.
    Seriously.. many thanks for starting this up.
    This website is one thing that is needed on the internet, someone with some originality!

    Reply

Leave a Comment