Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Authentication

Well done!

You have completed React Authentication!

Sign up for Treehouse Back to Library

Refactoring: ErrorDisplay Component

4:31 with Laura Coronel

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up