How come value from[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 !=[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",[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]);

  const deleteToDo = (e) => {
    let copyToDoList = [...toDoList];
    let filteredList = copyToDoList.filter((toDo) => { 
      return toDo !=[0].innerText})

  const handleChange = (e) => {

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

>Solution :

Try the following command. Then you would see that toDo and[0].innerText have different lengths.[0].innerText has one more lengths than toDo


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

Remove space.

Leave a Reply