Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How come value from e.target.parentNode.children[0].innerText never equal to value from filter function?

I’m trying to delete ToDo list by event delegation so I placed delete onClick handler on the ul element. Question I have is why toDo != e.target.parentNode.children[0].innerText never equal to true even when I place same value for both elements. So after I add "study" and "eat" for toDo list then click on delete button next to "study", e.target.parentNode.children[0].innerText shows "study" and toDo shows "study" as well, but it doesn’t get filtered out. They both have string type so I’m confused. So why doesn’t this work?

import './styles.css';
import React, {useState} from 'react';

export default function App() {
  const [toDoList, setToDoList] = useState([]);
  const [value, setValue] = useState([]);

  const addToDo = () => {
    let copyToDoList = [...toDoList];
    setToDoList([...copyToDoList, value]);
    setValue("");
  }

  const deleteToDo = (e) => {
    let copyToDoList = [...toDoList];
    let filteredList = copyToDoList.filter((toDo) => { 
      return toDo != e.target.parentNode.children[0].innerText})
    console.log(filteredList)
    setToDoList(filteredList);
  }

  const handleChange = (e) => {
    setValue(e.target.value);
  }

  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input value={value} onChange={handleChange} type="text" placeholder="Add your task" />
        <div>
          <button onClick={addToDo}>Submit</button>
        </div>
      </div>
      <ul onClick={deleteToDo}>
        {toDoList.map((toDo, idx) => {
          return(
            <li>
              <span>{toDo} </span>
              <button>Delete</button>
            </li>
            )
        })}
      </ul>
    </div>
  );
}

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Try the following command. Then you would see that toDo and e.target.parentNode.children[0].innerText have different lengths.

e.target.parentNode.children[0].innerText has one more lengths than toDo

console.log(toDo.length, e.target.parentNode.children[0].innerText.length);

And the solution is below
change this line {toDo} to {toDo}

Remove space.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading