Reactjs: Unexpected token, expected “,”

Question

Today is my first day of learning Reactjs. I create a react app using npx create-react-app and I was learning to iterate through an array when I got this error.

Parsing error: Unexpected token, expected ","

I tried everything suggested in other stackoverflow posts regarding same error but those solutions did not work for me. Please guide me how to resolve this error.

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"

App Component

import React, { Component } from 'react'
import Header from './component/Header/Header';

import './App.css';

class App extends Component {
  state = {
    todos: [
      {
        id: 1,
        title: "Dinner with husband",
        isComplete: false
      },
      {
        id: 1,
        title: "Complete Bakery",
        isComplete: false
      },
      {
        id: 1,
        title: "Buy toys",
        isComplete: false
      }
    ]
  };

  render() {
    return (
      <div>
        <Header/>
        {
          this.state.todos.map((todo) => (
            console.log(todo.title);
            <h3>{ todo.title }</h3>
          ));
        }
      </div>
    );
  }
}

export default App;

Answer 1

Change to:

this.state.todos.map((todo) => {
    console.log(todo.title);
    return <h3>{ todo.title }</h3>;
})

And check this mdn link(arrow function)

Answer 2

    import React, { Component } from 'react'
    import Header from './component/Header/Header';

    import './App.css';

    class App extends Component {
     state = {
          todos: [
                {
                 id: 1,
                 title: "Dinner with husband",
                 isComplete: false
                },
                {
                 id: 1,
                 title: "Complete Bakery",
                 isComplete: false
                },
                {
                 id: 1,
                 title: "Buy toys",
                 isComplete: false
                }
               ]
              };

              render() {
                 return (
                  <div>
                    <Header/>
                       {
                         this.state.todos.map((todo) => (
                          console.log(todo.title);
                          return <h3>{ todo.title }</h3>;
                         ));
                       }
                  </div>
                 );
                }
               }

   export default App;