Why can't i display my items by map function?-CodePudding

I wanna display my todo list but it bumps into the error as "src\components\TodoList.js Line 11:30: Array.prototype.map() expects a return value from arrow function array-callback-return". Is there anything wrong with my codes, pls help me! Thạk you so much!

This is my TodoList.js:

import React from "react";

function TodoList({ todos, setTodos }) {
  return (
    <div>
      {" "}
      {todos.map((todo) => {
        <li key={todo.id}>
          <input
            type="text"
            value={todo.title}
            onChange={(event) => event.preventDefault()}
          />{" "}
        </li>;
      })}{" "}
    </div>
  );
}

export default TodoList;

This is my Form.js:

import React from "react";
import { v4 as uuidv4 } from "uuid";

function Form({ input, setInput, todos, setTodos }) {
  const onInputChange = (event) => setInput(event.target.value);
  const onFormSubmit = (event) => {
    event.preventDefault();
    setTodos([
      ...todos,
      {
        id: uuidv4(),
        title: input,
        completed: false,
      },
    ]);
    setInput("");
  };
  return (
    <form onSubmit={onFormSubmit}>
      <div>
        <input
          type="text"
          placeholder="add a todo..."
          value={input}
          required
          onChange={onInputChange}
        />{" "}
        <button className="button-add" type="submit">
          {" "}
          add{" "}
        </button>{" "}
      </div>{" "}
    </form>
  );
}

export default Form;

This is my App.js:

import React, { useState } from "react";
import "./App.css";
import Header from "./components/Header";
import Form from "./components/Form";
import TodoList from "./components/TodoList";

function App() {
  const [input, setInput] = useState("");
  const [todos, setTodos] = useState([]);
  return (
    <div>
      <div className="container">
        <div className="app-wrapper">
          <div>
            <Header />
            <Form
              input={input}
              setInput={setInput}
              todos={todos}
              setTodos={setTodos}
            />{" "}
            <TodoList todos={todos} setTodos={setTodos} />{" "}
          </div>{" "}
        </div>{" "}
      </div>{" "}
    </div>
  );
}
export default App;

CodePudding user response：

Regular function body, you still need to return the JSX in the .map callback.

function TodoList({ todos, setTodos }) {
  return (
    <div>
      {todos.map((todo) => {
        return (
          <li key={todo.id}>
            <input
              type="text"
              value={todo.title}
              onChange={(event) => event.preventDefault()}
            />
          </li>
        );
      })}
    </div>
  );
}

Or use an implicit arrow function return by removing the function body.

function TodoList({ todos, setTodos }) {
  return (
    <div>
      {todos.map((todo) => (
        <li key={todo.id}>
          <input
            type="text"
            value={todo.title}
            onChange={(event) => event.preventDefault()}
          />
        </li>
      ))}
    </div>
  );
}

CodePudding user response：

      <div>
       {" "}
       {todos.map((todo) => {
         return (
            <li key={todo.id}>
           <input
             type="text"
             value={todo.title}
             onChange={(event) =>      event.preventDefault()}
           />{" "}
         </li>);
       })}{" "}
     </div>

or this

<div>
        {" "}
        {todos.map((todo) => (
            <li key={todo.id}>
                <input
                    type="text"
                    value={todo.title}
                    onChange={(event) =>      event.preventDefault()}
                />{" "}
            </li>
        ))}
        {" "}
    </div>