How do observers receive props?

Question

I can understand how TodoListView receives { todoList } in its observer because its props is being referenced by

render(<TodoListView todoList={store} />, document.getElementById("root"));

But I don't understand how TodoView receives { todo } in its observer because its props is not being referenced like TodoListView

import * as React from "react";
import { render } from "react-dom";
import { observer } from "mobx-react-lite";
import Todo from "./Todo";
import TodoList from "./TodoList";

const TodoListView = observer(({ todoList }) => (
  <div>
    <ul>
      {todoList.todos.map((todo) => (
        <TodoView todo={todo} key={todo.id} />
      ))}
    </ul>
    Tasks left: {todoList.unfinishedTodoCount}
  </div>
));

const TodoView = observer(({ todo }) => (
  <li>
    <input
      type="checkbox"
      checked={todo.finished}
      onClick={() => todo.toggle()}
    />
    {todo.title}
  </li>
));

const store = new TodoList([
  new Todo("Get Coffee"),
  new Todo("Write simpler code")
]);

render(<TodoListView todoList={store} />, document.getElementById("root"));

How is TodoView getting { todo } ? Codesandbox

Answer 1

Literally the same way, you pass each todo as a prop for TodoView when you map over them:

    <ul>
      {todoList.todos.map((todo) => (
        // Right here `todo={todo}`
        <TodoView todo={todo} key={todo.id} />
      ))}
    </ul>