docs(getting-started): Changes MST values to native Map.values in…

… Getting Started tutorial (#1982 by @alexamy)

[skip ci]

docs/intro/getting-started.md

@@ -328,12 +328,11 @@ MST loves MobX, and is fully compatible with it's `autorun`, `reaction`, `observ
 
 ```javascript
 import { observer } from 'mobx-react-lite'
-import { values } from 'mobx'
 
 const App = observer(props => (
     <div>
         <button onClick={e => props.store.addTodo(randomId(), "New Task")}>Add Task</button>
-        {values(props.store.todos).map(todo => (
+        {Array.from(props.store.todos.values()).map(todo => (
             <div>
                 <input type="checkbox" checked={todo.done} onChange={e => todo.toggle()} />
                 <input type="text" value={todo.name} onChange={e => todo.setName(e.target.value)} />
@@ -366,7 +365,7 @@ const TodoView = observer(props => (
 const AppView = observer(props => (
     <div>
         <button onClick={e => props.store.addTodo(randomId(), "New Task")}>Add Task</button>
-        {values(props.store.todos).map(todo => (
+        {Array.from(props.store.todos.values()).map(todo => (
             <TodoView todo={todo} />
         ))}
     </div>
@@ -391,10 +390,10 @@ const RootStore = types
     })
     .views(self => ({
         get pendingCount() {
-            return values(self.todos).filter(todo => !todo.done).length
+            return Array.from(self.todos.values()).filter(todo => !todo.done).length
         },
         get completedCount() {
-            return values(self.todos).filter(todo => todo.done).length
+            return Array.from(self.todos.values()).filter(todo => todo.done).length
         }
     }))
     .actions(self => ({
@@ -420,7 +419,7 @@ const TodoCounterView = observer(props => (
 const AppView = observer(props => (
     <div>
         <button onClick={e => props.store.addTodo(randomId(), "New Task")}>Add Task</button>
-        {values(props.store.todos).map(todo => (
+        {Array.from(props.store.todos.values()).map(todo => (
             <TodoView todo={todo} />
         ))}
         <TodoCounterView store={props.store} />
@@ -446,13 +445,13 @@ const RootStore = types
     })
     .views(self => ({
         get pendingCount() {
-            return values(self.todos).filter(todo => !todo.done).length
+            return Array.from(self.todos.values()).filter(todo => !todo.done).length
         },
         get completedCount() {
-            return values(self.todos).filter(todo => todo.done).length
+            return Array.from(self.todos.values()).filter(todo => todo.done).length
         },
         getTodosWhereDoneIs(done) {
-            return values(self.todos).filter(todo => todo.done === done)
+            return Array.from(self.todos.values()).filter(todo => todo.done === done)
         }
     }))
     .actions(self => ({
@@ -613,7 +612,7 @@ Now we need to edit our views to display a select along with each `TodoView`, wh
 const UserPickerView = observer(props => (
     <select value={props.user ? props.user.id : ""} onChange={e => props.onChange(e.target.value)}>
         <option value="">-none-</option>
-        {values(props.store.users).map(user => (
+        {Array.from(props.store.users.values()).map(user => (
             <option value={user.id}>{user.name}</option>
         ))}
     </select>
@@ -644,7 +643,7 @@ const TodoCounterView = observer(props => (
 const AppView = observer(props => (
     <div>
         <button onClick={e => props.store.addTodo(randomId(), "New Task")}>Add Task</button>
-        {values(props.store.todos).map(todo => (
+        {Array.from(props.store.todos.values()).map(todo => (
             <TodoView store={props.store} todo={todo} />
         ))}
         <TodoCounterView store={props.store} />