delete button on react tutorial

Level 3

sorry bout that... the delete icon: SVG (X button) is working, its just not visible on the screen. which is weird...

app.css:

...
.x-button {
  background: white;
  color: #333;
  border: none;
  cursor: pointer;
}

.x-button:hover {
  color: #1F2937;
}

.x-button-icon {
  width: 1.5rem;
  height: 1.5rem;
}
...

app.js:

...
function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      title: 'finish todo list',
      isComplete: false,
      isEditing: false,
    },
    {
      id: 2,
      title: 'groceries',
      isComplete: false,
      isEditing: false,
    }
  ]);

  const [todoInput, setTodoInput] = useState('');
  const [idForTodo, setidForTodo] = useState(4);

  function addTodo(event){
    event.preventDefault();
    if(todoInput.trim().length === 0){
      return;
    }
    setTodos([...todos, {
      id: idForTodo,
      title: todoInput,
      isComplete: false,
    },
  ]); 
  setTodoInput('');
  setidForTodo(prevIdForTodo => prevIdForTodo + 1);
  }

  function deleteTodo(id){
    setTodos([...todos].filter(todo => todo.id !== id));
  }

function handleInput(event){
  setTodoInput(event.target.value);
}

function completeTodo(id){
  const updatedTodos = todos.map(todo => {
    if(todo.id === id) {
      todo.isComplete = !todo.isComplete
    }
    return todo;
  })
  setTodos(updatedTodos);
}

function markAsEditing(id){
  const updatedTodos = todos.map(todo => {
    if(todo.id === id) {
      todo.isEditing = true;
    }
    return todo;
  })
  setTodos(updatedTodos);
}

function updateTodo(event, id){
  const updatedTodos = todos.map(todo => {
    if(event.target.value.trim().length === 0){
      todo.isEditing = false;
      return todo;
    }
    if(todo.id === id) {
      todo.title = event.target.value;
      todo.isEditing = false;
    }
    return todo;
  })
  setTodos(updatedTodos);
}

function cancelEdit(event, id){
  const updatedTodos = todos.map(todo => {
    if(todo.id === id){
      todo.isEditing = false;
    }
    return todo;
  });
  setTodos(updatedTodos);
}

  return (
    <div className="todo-app-container">
      <div className="todo-app">
        <h2>Todo App</h2>
        <form action="#" onSubmit={addTodo}>
          <input type="text" value={todoInput} onChange={handleInput} className="todo-input" placeholder="what needs doing?"/>
        </form>

        {todos.length > 0 ? (
          <>
        <ul className="todo-list">
          { todos.map((todo, index) => (
          <li key={todo.id} className="todo-item-container">
            <div className="todo-item">
              <input type="checkbox" onChange={() => completeTodo(todo.id)} checked={todo.isComplete ? true : false}/>
              {!todo.isEditing ? (

              <span onDoubleClick={() => markAsEditing(todo.id)} className={`todo-item-label ${todo.isComplete ? 'line-through' : ''}`}>{todo.title}</span>
              ) : ( <input type="text" onBlur={(event) => updateTodo(event, todo.id)} onKeyDown={event => {if(event.key === 'Enter') {updateTodo(event, todo.id);} else if(event.key === 'Escape') {cancelEdit(event, todo.id);}}} className="todo-item-input" defaultValue={todo.title} autoFocus/> )}
            </div>
            <button onClick={() => deleteTodo(todo.id)} className="x-button">
              <svg className="x-button-icon" fill="none" viewBox="0 0 24 24" stroke="differentColor" display="visible">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </li>
          ))}
        </ul>
...

ok, thanks guys.