ioplabels.blogg.se - React todolist app

render: In render we put our html, and call our functions mentioned above.

resetForm: Function is responsible for cleaning the value of the new task input. Beginning our React todo list Previous Overview: Client-side JavaScript frameworks Next Let's say that we've been tasked with creating a proof-of-concept in React an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them.

showNewTaskInput: Function shows new task input.

onUpdate: Function is responsible to update specific task's title.onDone: Function is responsible for setting the status of specific task to "Done".onStart: Function is responsible for starting the timer for specific task, it calls the Api to save the start time in the Cosmic's db.onSave: Function creates a new task using the Cosmic api.onChange: Function is responsible to keep the new task title in the state.createNotification: Function which gets a notification type as an argument and puts it in the state for further use.getData: Function which does a call to the API and updates the list of tasks, after what we reset the value of new task input using this.resetForm().ComponentWillMount: This is function which belongs to React component lifecycle, here we just call another method created by us.Constructor: We are setupping new Api service, this gonna be used to connect to the Cosmic API.We use the following methods in our Class:

notification: Current notification name, we also have types for notifications listed below as an object, here are sorted the names for the notification types.showNewTaskInput: Boolean value, responsible for show/hide the new task input.

List: Array of strings, here are saved all the tasks.

Form-> title : Responsible for new task input value.

So in state we are keeping the following data. This is caused by CORS preventing you from serving content from different origins.In this file we are creating the home page file. When the React app loads in your browser you will most likely see an error in your JavaScript console.