(初学者向け)Reactレンダリング中に別のComponentで呼び出されてしまっているエラー

React学習としてTodoリストを作成中に起きたエラー。

エラー内容

React学習中のTodリスト作成時のエラー
Todoコンポーネントのレンダリング中に、別のコンポーネンント(List)で呼び出されてるんだけどという警告
(表示狂ってるのでもはやエラー)

Warning: Cannot update a component (`Todo`) while rendering a different component (`List`). To locate the bad setState() call inside `List`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render Error Component Stack
    at List (List.jsx:1:16)
    at Todo (Todo.jsx:20:29)
    at Example (<anonymous>)
    at Suspense (<anonymous>)
    at BaseErrorBoundary (BaseErrorBoundary.jsx:5:5)
    at DynamicLoader (App.jsx:7:26)
    at div (<anonymous>)
    at div (<anonymous>)
    at App (App.jsx:18:16)

原因

関数をラップしないで渡していたので実行されてしまっていた。
該当箇所

return (
    <>
      {todos.map((todo)=>{
        return (
          <div key={todo.id}>
            <button onClick={deleteTodo(todo.id)}>完了</button> <-ここ
            {todo.content}
          </div>
        )
      })}
    </>
  )
};
export default List;

解消法

ラップしてあげる

return (
    <>
      {todos.map((todo)=>{
        return (
          <div key={todo.id}>
            <button onClick={()=>deleteTodo(todo.id)}>完了</button>
            {todo.content}
          </div>
        )
      })}
    </>
  )