I've been trying to learn React for a while now, and my mentor gave me the task of learning how to create (in React) a to-do list. I've been watching a tutorial, everything went well at first, but I got stuck when starting to use components.

In the tutorial, he creates a different component for the "form", which I'll recall in the App.js file.

Here is the App.js file:

    import './App.css';
import Form from './components/Form';

function App() {
  return (
    <div className="App">
      <header>
        <h1> Adi's ToDo list </h1>
      </header>
    </div>
  );
}

export default App;

Here is also the Form.js file:

function Form() {
  return (
    <form>
      <input type="text" class="todo-input" />
      <button class="todo-button" type="submit">
        <i class="fas fa-plus-square"></i>
      </button>
      <div class="select">
        <select name="todos" class="filter-todo">
          <option value="all">All</option>
          <option value="completed">Completed</option>
          <option value="uncompleted">Uncompleted</option>
        </select>
      </div>
    </form>
  );
}

export default Form;

VSC tells me to remove import Form from and to just use import './components/Form'; but that doesn't change anything.