Bracket wrong in react

Question

Can not see why this isn't working.

This is a react.js app

App.js

import {useState} from "react";
import './App.css';
function App() {
    const [age, setAge] = useState(0);
    const [inputValue, setInputValue] = useState("");
    const [showText, setShowText] = useState(true);
    const [textColor, setTextColor] = useState("blue");
    const [count, setCount] = useState(0);
    const [todoList, setTodoList] = useState([]);
    const [newTask, setNewTask] = useState("");

    
    const increaseAge = () => {
    setAge(age + 1);
    };
    const decreaseAge = () => {
        setAge(age - 1);
    };
     const increaseAgeten = () => {
        setAge(age + 10);
     };
     const decreaseAgeten = () => {
        setAge(age - 10);
     };
    const increaseAgehundred = () => {
        setAge(age + 100);
     };
     const decreaseAgehundred = () => {
        setAge(age - 100);
     };
    const handleInputChange = (event) =>{setInputValue(event.target.value)}
      

        const increase = () => {
        setCount(count + 1)
        };
    const decrease = () => {
        setCount(count - 1)
    };
    const setToZero = () => {
        setCount(0)
    };
    const handleChange = (event) => {
    setNewTask(event.target.value);
    };
    
    const addTask = () => {
    const newTodoList = [...todoList, newTask];
    setTodoList(newTodoList);
    };
    
    return (
            <div className="App">
        <div className="addTask">
        <input onChange={handleChange}/>
        <button onClick={addTask}>Add Task</button>
        </div>
        <div className="List">
        todoList.map((task) => {
        return <h1>(task)</h1>;
        }
    
        </div>
        {age}
        <br></br>
        
        <button onClick={increaseAge}>+1</button>
        <button onClick={decreaseAge}>-1</button>
        <br></br>
        <button onClick={increaseAgeten}>+10</button>
        <button onClick={decreaseAgeten}>-10</button>
        <br></br>
        <button onClick={increaseAgehundred}>+100</button>
        <button onClick={decreaseAgehundred}>-100</button>
        <br></br>
        <input type="text" onChange = {handleInputChange}/>
        {inputValue}
        <br></br>
        <button onClick={() => {setShowText(!showText)}}>
        Show/Hide
    </button>
        {showText && <h1>Shane</h1>}

        <button
    onClick={() => {setTextColor(textColor === "blue" ? "red" : "blue");}}>Change colour
</button>
        {<h1 style={{ color: textColor }}>Blah</h1>}
      
        
        <button onClick={increase}>Increase</button>
        <button onClick={decrease}>Decrease</button>
        <button onClick={setToZero}>Reset</button>
         <br></br>
        {count}
        </div> 
  );
}

export default App;

The error shows some problem with return on line 60

  58 |      <div className="List">
  59 |      todoList.map((task) => {
> 60 |      return <h1>(task)</h1>;
     |      ^
  61 |      }

This was from youtube tutorial https://youtu.be/f55qeKGgB_M?t=6273

Answer 1

This is the right syntax :

<div className="List">
  {todoList.map((task, index) => (
    <h1 key={index}>{task}</h1>
  ))}
</div>

Don't forget to use the second parameter on the map function to give an unique key to each child.