Displayed correct index.

Index was hard-coded. Now it retrieves current last index used.

2 files changed, 8 insertions, 2 deletions

diff --git a/src/ToDo.jsx b/src/ToDo.jsx
index 6ae8311..b3e091d 100644
--- a/src/ToDo.jsx
+++ b/src/ToDo.jsx
@@ -1,9 +1,14 @@
 import React, { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { add_todo, select_todos } from "./features/todo/reducer";
+import {
+    add_todo,
+    select_todos,
+    select_last_index,
+} from "./features/todo/reducer";
 
 export function NewToDo() {
     const my_todos = useSelector(select_todos);
+    const my_last_idx = useSelector(select_last_index);
 
     const dispatch = useDispatch();
     const [new_text, set_new_text] = useState("");
@@ -68,7 +73,7 @@ export function NewToDo() {
                                     <input
                                         className="form-control"
                                         id="new-todo-id"
-                                        value="4"
+                                        value={my_last_idx + 1}
                                         disabled
                                     />
                                     <label htmlFor="floatingInput">ID</label>
diff --git a/src/features/todo/reducer.js b/src/features/todo/reducer.js
index 29422e9..e3e2470 100644
--- a/src/features/todo/reducer.js
+++ b/src/features/todo/reducer.js
@@ -28,5 +28,6 @@ export const todo_slice = createSlice({
 export const { add_todo } = todo_slice.actions;
 
 export const select_todos = (state) => state.todo_list.todos;
+export const select_last_index = (state) => state.todo_list.last_id;
 
 export default todo_slice.reducer;