newTask
is an object and allTasks
is an array.
The form displayed on screen consists of an input element for the title of the task, a button for submitting the task and (once we type in a title), a textarea element for entering Details of the task also appears.
newTask
starts off being an empty object and initially allTasks
is an empty array.
// Initially
newTask ---> {}
allTasks ---> []
As we type in text for the title or for the details, the properties and associated values of the new task are created or updated (depending on how the user is interacting with the form). Once the task is submitted, this new task object is added to the allTasks
array. The newTask
object is then reset to an empty object.
If you look at the file NewTask.js
(you can access it by clicking on the Folder Icon in the top left corner of the editor and then navigate to the Presentational folder), you will see that the HTML input element has been given the attribute name="title"
and the textarea element has been given the attribute name="description"
In the setters, we are using spread syntax (to preserve existing properties) and computed property names (see documentation: Object initializer - JavaScript | MDN ) to provide the appropriate properties,
//EXAMPLE - Computed Property Names
let name = "title";
// This in not what we want
let x = {name: "Some text"};
console.log(x); // {name: "Some text"}
// This is what we want
let y = {[name]: "Some text"};
console.log(y); // {title: "Some text"}
Suppose we type in the text "First Task"
in the title input box. The event handler handleChange
will be triggered and result in
// xxxxx is time in milliseconds when event handler was triggered
newTask ---> { title: "First Task", id: xxxxx }
allTasks ---> []
Suppose we type in text "Complete this task soon"
in the Details textarea, then handleChange
will be triggered and result in
// yyyyy is time in ms when event handler was triggered
// The spread syntax ... in the setter allows the previous title property to be retained
newTask ---> { title: "First Task", description: "Complete this task soon" , id: yyyyy }
allTasks ---> []
When the "Add Task"
button is clicked, the handleSubmit
event handler does the following:
newTask ---> {}
allTasks ---> [{ title: "First Task", description: "Complete this task soon" , id: yyyyy}]
If another new task is entered in the form, then:
// While entering task in form
newTask ---> { title: "Second Task", description: "Not so important" , id: zzzzz}
allTasks ---> [{ title: "First Task", description: "Complete this task soon" , id: yyyyy}]
// After submitting
newTask ---> {}
allTasks ---> [ { title: "Second Task", description: "Not so important" , id: zzzzz},
{ title: "First Task", description: "Complete this task soon" , id: yyyyy} ]