Failed to compile. 'Hi' is not defined no-undef in a new .js file (TaskList.js) (react js component)

Question

TaskList.js

import React from 'react';
export default () => {
return {
    <p>
    Hi
    </p>
     };
   }

I wonder why couldn't I use the HTML code here in this TaskList.js file in order to make the word "Hi" appear in the front end (localhost:3000) ?

I also found the following error in the front end:

Failed to compile

    src\TaskList.js
    Line 6:9:  'Hi' is not defined  no-undef
    Search for the keywords to learn more about each error.

and here's another file that's related to TaskList.js

App.js

   import logo from './logo.svg';
   import './App.css';
   import React from 'react';
   import TaskList from './TaskList.js';

   function App() {
     const tasks = [
       {id: 0, description: 'do this', done: false},
       {id: 1, description: 'do that', done: false}
     ];
    return (
      <div>
          <TaskList />
      </div>
    );
   }

   export default App;

I came up with the above code as I followed the instructor of a course named "Web Development for Blockchain". Unfortunately, he hasn't answered this question for me yet. So, I post this question here as I really need help from you guys on StackOverflow.

Answer 1

Return like this (change the {} with () )

return ( 
    <p>
        Hi
    </p>
)