Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
With our app complete, there are parts of our code that we can refactor to minimize duplicate code. In this step, we'll move the error displaying code into it's own component.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
With our app complete,
there are parts of our code that we
0:00
can refactor to minimize duplicate
code and improve maintainability.
0:04
The code for displaying errors
in both our UserSignIn and
0:09
UserSignUp components is identical.
0:13
Let's create a component that
displays a list of errors.
0:17
So we can minimize
the duplication of code and
0:21
reuse the component in case
we extend the application.
0:24
For example, if we turn this app
into a library manager website,
0:28
we would like to display a list
of errors if a librarian tries
0:33
to add a blank book to the database.
0:38
We'll get started by creating a new
0:41
file in the components folder
named ErrorsDisplay.js.
0:44
We'll create a new component
called ErrorsDisplay.
0:52
It will take in a prop called errors,
0:57
which will be an array
containing the list of errors.
1:00
Let's not forget to export it with
export default ErrorsDisplay.
1:04
In the UserSignIn component,
copy over the display error logic and
1:12
paste it inside our
ErrorsDisplay component.
1:17
We could just add a return keyword to
the front of the ternary operator,
1:24
and that would work.
1:29
Instead, let's turn this ternary
operator into an if statement.
1:30
I'll comment out the code
we just copied over.
1:36
We'll create a new variable that will
store the JSX to render on the page.
1:40
We'll call the variable errorsDisplay and
set its value to null.
1:47
We'll create an if statement
that checks if the errors
1:53
array contains any errors
with errors.length.
1:58
If so, we'll set errorsDisplay
equal to the JSX we copied over.
2:02
So let's uncomment the JSX code and
move it to inside the parentheses.
2:09
I'll fix the formatting by right-clicking
and selecting Format Document.
2:16
All that's left to do is return
the errorsDisplay variable.
2:22
I'll delete the remaining comments.
2:27
The errorsDisplay component is
now ready to be used in our app.
2:30
In the UserSignIn component,
we'll import ErrorsDisplay
2:35
at the top of the file with import
ErrorsDisplay from './ErrorsDisplay'.
2:41
Let's scroll down to the return
statement and replace the lines of
2:48
code that display the list of
errors with the ErrorsDisplay tag.
2:53
The component expects a prop named
errors containing an array of errors.
2:58
So we'll pass our ErrorsDisplay tag the
prop errors and pass it the errors state.
3:04
Let's save and do this all over again
before our UserSignUp component.
3:12
At the top of the file,
we'll import ErrorsDisplay
3:17
with import ErrorsDisplay
from './ErrorsDisplay'.
3:22
Let's scroll down to
the return statement and
3:27
replace the same JSX expression
with the ErrorsDisplay tag.
3:30
And pass it an errors prop
set to the errors state.
3:35
Let's save and
make sure both our sign in and
3:40
sign up forms still display
the list of errors.
3:43
Submit an empty Sign in form.
3:47
Great, we still see our
error display on the screen.
3:50
Head on over to the Sign up form and
submit a partially filled out form.
3:54
And we only see the errors for
the input fields we left blank.
3:59
This may not feel like a big change, but
4:04
this small change enhanced
our app's maintainability.
4:07
Now if we ever need to render
a list of errors in our app,
4:11
we can just call
the ErrorsDisplay component.
4:15
Or if we want to change how our errors
are displayed, we only need to update it
4:19
in one place instead of having to track
down the components that display errors.
4:25
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up