We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to apply for this job!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

Blog hero image

How to Build a Productivity Application in React: Part 2

Claire Sinozich 3 April, 2019 | 4 min read

In my last article, aptly named How to Build a Productivity Application in React: Part 1, I laid out how to create a react app using the also aptly named Create React App from Facebook, and yarn for setting up our development server. I also walked through how to create a to-do list in React using functional and class components, and how to add items to that to-do list using state.

In this second part of the series, I’m going to explain how to mark items as complete and remove completed items. The starting code for this portion of the tutorial can be found in the GitHub Repository here.

This series is for my edification as much as it is yours, so please don’t hesitate to let me know if I’ve gotten something wrong, or ask questions. And with that, let’s dive in!

Marking Items as Complete

Our first step in this portion of the tutorial is to toggle the boolean complete from our todos array between true and false. As I’m handling all of my state inside of my App.js file, this is where I’ll place a toggleComplete() method.

This toggleComplete() method will take a unique identifier (here called itemID) as an argument, and then map over our todos array, checking each id in our todo object against the itemID. If the identifiers are the same, we set the completed value on the todo object to the opposite of what it currently states, e.g., if todo.completed is true, this will set todo.completed to false, and vice versa. This is what allows us to toggle the completed boolean.

However, if the identifiers do not match, the todo object is returned unchanged. Now, we set our constant of todos (line 37) declared within toggleComplete() on the state using our this.setState() method, followed by resetting the todo object back to an empty string.

1_Ie–PwBNHrIR25Vrn2wKow (1).png

Now, let’s pass our toggleComplete() function down to our TodoList component in App.js:

1_uNPcOj3IyannP-ftVydM0g.png

Let’s go one step further and pass toggleComplete() down to our Todo component in the TodoList.js file:

1_JkBBNVpo5toyzla5ylFYRQ.png

And last but not least, we’ll actually give our toggleComplete() method to each one of our Todo components in our Todo.js file:

1_RsA6lVCfxUAv40X5J8r7wA.png

Using your React Dev Tools to View Your Work

Voila! You can toggle your completed value by clicking on each task in your to-do list. Wait, what’s that? It’s not working? Actually, it is! Unfortunately, we haven’t added any styles to our application at all, so there’s no difference in what you see when you click on a task. And, since we haven’t added the remove functionality yet, it’s even harder to see.

If you’d like to see this toggle function in action, head over to your [React Dev Tools] (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) in Chrome. Open up your application, and in your TodoList component, you’ll find your Todo component you’ve added to the screen. If you look at the Props that say todo{…} in your Todo tab at the bottom, you’ll be able to see the prop completed toggle on and off as you click on your todo. This will be easier to see when we get to styling our application later.

giphy (4).gif

Removing Completed Items

Let’s jump back into our App.js file to add another method to our App class. Here, I’ve called the method removeItems, and it will take a click event as an argument. We’ll add the click event to our Remove Completed button here shortly.

Inside our removeItems function, we’ll want to start by using our built-in method, event.preventDefault(), which like in our addTask function, will prevent the button from refreshing the server every time you click it.

Afterward, we’re going to set state by using a callback function. This callback function will allow you to check prevState, or the most recent iteration of state (read more about using state and previous state [here] (https://css-tricks.com/understanding-react-setstate/)). prevState exists in opposition to the original state, declared in your App’s constructor function.

Basing our setState() off of our prevState (line 48), we then want to return (line 49) a new array of todos (line 50). This new array of todos will be built using our .filter() method, in which the function checks each of the todo items in the todos array for whether or not completed is listed as true or false. In line 51, we’re seeing all of the items where completed is false (based on prevState) being returned to the todos array. This todos array is then being set on state (line 48), providing you with a list of tasks in your application that have not been completed.

1_c8I5lziG11P0MqoN2Gi5bQ.png

Now, lets hand this removeItems() function down to our TodoForm component in our App:

1_bk8R69ciUZjQN1NrbGu1SA.png

Then, add removeItems as an onClick to our Remove Completed button in the TodoForm component:

1_b6aN0TjSLEgL9z6yxvS0RA.png

And there we go! You can now remove completed items from your list. Again, this will be slightly difficult to see until we get to styling our application. But, go ahead and try it out! Your application should be working smoothly by now.

This is Part 2 in a tutorial series on how to create a Productivity Application in React. Check out Part 1 here, and look out for Part 3, adding our data to local storage, soon!

Follow the Author on Twitter

Originally published on medium.com

Author's avatar
Claire Sinozich
I'm currently a student at Lamba School's Full Stack Web Development program.
    JavaScript
    React.js
    HTML
    CSS
    Styled Components

Related Jobs

Related Issues

viebel / klipse-clj
viebel / klipse-clj
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
  • $100
viebel / klipse
  • 1
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
  • $80
viebel / klipse
  • Open
  • 0
  • 0
  • Advanced
  • Clojure
  • $80
viebel / klipse
  • Started
  • 0
  • 2
  • Advanced
  • Clojure
  • $180
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 1
  • Intermediate
  • Clojure
  • $80

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GithubStart with Stack OverflowStart with Email