This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In


    Load a Universal React Named Exported Component with the Key Option

    Tim KindbergTim Kindberg

    It’s not uncommon to export a component as a named export as opposed to a default export. The key option in the universal higher-order component allows you to select which named export in the module that you’d like to load.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    Man: 00:00 When you use universal and you tell it to import a file, it automatically pulls out the default export. If we look at fu, we can see that I'm exporting fu as the default. If I look at bar, I'm also exporting bar as the default. When I load those files, that's working but if I were to delete these defaults and only export fu and bar as named exports, when I save, it's going to tell me that the export wasn't found.

    00:36 It's actually showing me, I think, the default error component. The way you can fix this is two ways. It's actually one option called key. You can actually just pass it a string. You give it the name of the named export that you want to pull out of that module. Out of the fu file, I'd like to pull out the fu export.

    01:03 When I save that and refresh, I can now load fu. An alternative, if you need to do a little bit more with the module, is you can pass key a function. When you pass a function, you'll actually receive the full module that was loaded. You just need to return the export that you're looking for.

    01:26 There's two different ways you can do it. You can pass a string or a function. Now when I refresh, both fu and bar are loading their named exports.