Why we can use any prop name in function react without explicit mention?

I'm learning mobX-state-tree, and in their tutorial code, i see this

const App = observer(props => (
  <div>
    <button onClick={e => props.store.addTodo(randomId(), "New Task")}>
      Add Task
    </button>
    {values(props.store.todos).map(todo => (
      <div key={todo.id}>
        <input
          type="checkbox"
          checked={todo.done}
          onChange={e => todo.toggle()}
        />
        <input
          type="text"
          value={todo.name}
          onChange={e => todo.setName(e.target.value)}
        />
      </div>
    ))}
  </div>
));

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

I have a little confuse, where store was mentioned? Why we can use store as prop, but not prop={store}, for example if i change store to something else, say "abcxyz", then it got error Cannot read properties of undefined (reading 'todos'). So why we have store here. Please tell me, thank you a lot

Their code : https://codesandbox.io/s/310ol795x6?file=/index.js

Their tutorial, this was selection "Getting to the UI" : https://mobx-state-tree.js.org/intro/getting-started

You should post what are you trying to do, but i think you need to understand the basics of javascript object and how react works.

You can use any name as a prop. But if you choose prop={any object}. You have to use it inside your app observer as:

const App = observer(props => (
  <div>
    <button onClick={e => props.prop.addTodo(randomId(), "New Task")}>
      Add Task
    </button>
    {values(props.prop.todos).map(todo => (

The value that are passed inside the curly braces can be anything too, in this case they are defining store as

const store = RootStore.create({
  users: {},
  todos: {
    "1": {
      id: id,
      name: "Eat a cake",
      done: true
    }
  }
});

if you use

<App store={store} />

the props object inside the observer will be

{
  store: {
    users: {},
      todos: {
        "1": {
          id: id,
          name: "Eat a cake",
          done: true
        }
      }
  }
}

now if you use

<App prop={store} />

the props object inside the observer will be

{
      prop: {
        users: {},
        todos: {
          "1": {
            id: id,
            name: "Eat a cake",
            done: true
           }
          }
      }
    }

as you can see you dont have the property store anymore, so if you keep the props.store.todos, the property store is undefined.

Cheers.