From the course: React for Web Designers

Unlock this course with a free trial

Join today to access over 22,500 courses taught by industry experts.

Solution: Better usability and animation

Solution: Better usability and animation - React.js Tutorial

From the course: React for Web Designers

Start my 1-month free trial Buy for my team

Solution: Better usability and animation

“

- Let's take a look at one possible solution to this usability and animation challenge. So we can see there's a 'Reset' button here. If I try setting a few of these filters, I have some different animations happening, and if I click 'Reset', I have all the people once again. All right, let's look at the code. So first we'll take a look at the 'Reset' button implementation. That's going to be down here in 'Filters'. So I'll scroll down first to the elements that create the 'Reset' button. I just used another one of these divs with the class "group", and put a 'Reset' button in there. And it has an event handler 'onClick', which is calling a function called 'resetFilters'. A function which is defined up here. And this is just calling 'props.updateFormState' for each of the elements of state that need to be updated. Now any time that you start writing the same thing more than once, that's an opportunity to make some changes, which is something that you could do by changing how this…

Contents