Why is my react import function not working-CodePudding

I am trying to import a function from another file in react, but it says that my function is not defined

in Todolist.js:

import React from 'react';
export default function TodoList() {
  return (
    <div>
      <h1>Todo List</h1>
    </div>
  )
}

In App.js:

//import react from 'react';
import React from 'react';
import {Todolist} from "./TodoList";


function App() {
  return (
    <TodoList />
  )
}

export default App;

the result:

WARNING in src\App.js Line 3:9: 'Todolist' is defined but never used no-unused-vars

ERROR in src\App.js Line 8:6: 'TodoList' is not defined react/jsx-no-undef

CodePudding user response：

change to default import

import Todolist from "./TodoList";

CodePudding user response：

because you use export default ....

the import should be like this.

import Todolist from "./TodoList";