I am new to React, and I am planning to build a simple task management site using React which I am having a couple of confusions about. Below is a wireframe I made for the project:
My first confusion is regarding the task number field which I want the system to auto-generate. For simplicity, I want the task number to start with 001 which will automatically increase by 1 after a new task is created. For now, I don't care about preserving the value after the user leaves or refreshes the site. So I think I would set taskNumber to be a state variable to keep track of its value. However, as I want to show the list of all created tasks on another page, I wonder about if routing to another page for showing the tasks would reset the value in taskNumber. After doing some searches, I still failed to find an answer to it.
If the value in taskNumber will not be preserved when the user goes to the page which shows all tasks, is there any recommended way for preserving this kind of value across different pages on a website? By that I mean using only front-end and React.
I am also puzzled about whether using the useReducer hook would be a good idea for getting the user's input for the task information. My initial idea is to create a state object for the useReducer hook which will contain every piece of information of the task:
const initialState = {
taskNum: taskNum, //will start at 001
taskTitle: "", //empty by default
importance: 1, //1 stands for trivial, 2 is normal, 3 is important, and 4 is highly important
description: "", //empty by default
taskState: taskState, //will be set as another state variable
startTime: getTime, //will be a function for getting the date and time
endTime: null, //not set until task is completed
awaitNotes: null, //disabled unless task state is awaiting
};
However, it seems that embedding some state variables in a useReducer hook is unheard of and not right.
I am mainly stuck at these two points right now. I hope somebody can clear up my confusion about them and provide me with some hints as to what knowledge in React I may also need for building this project (is knowing basic React hooks enough?) Thank you very much for your kind help.
