Advanced React Components

The chapter will focus on the implementation of advanced React components. You will learn about higher order components and how to implement them. In addition you will dive into more advanced topics in React and implement complex interactions with it.

Ref a DOM Element

Sometimes you need to interact with your DOM nodes in React. The ref attribute gives you access to a node in your elements. Usually that is an anti pattern in React, because you should use its declarative way of doing things and its unidirectional data flow. You have learned about it when you have introduced your first search input field. But there are certain cases where you need access to the DOM node. The official documentation mentions three use cases:

  • to use the DOM API (focus, media playback etc.)
  • to invoke imperative DOM node animations
  • to integrate with third-party library that needs the DOM node (e.g. D3.js)

Let’s do it by example with the Search component. When the application renders the first time, the input field should be focused. That’s one use case where you would need access to the DOM API. This chapter will show you how it works, but since it is not very useful for the application itself, we will omit the changes after the chapter. You can keep it for your own application though.

In general, you can use the ref attribute in both functional stateless components and ES6 class components. In the example of the focus use case, you will need a lifecycle method. That’s why the approach is first showcased by using the ref attribute with an ES6 class component.

The initial step is to refactor the functional stateless component to an ES6 class component.

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. class Search extends Component {
  3.   render() {
  4.     const {
  5.       value,
  6.       onChange,
  7.       onSubmit,
  8.       children
  9.     } = this.props;
  11.     return (
  12. # leanpub-end-insert
  13.       <form onSubmit={onSubmit}>
  14.         <input
  15.           type="text"
  16.           value={value}
  17.           onChange={onChange}
  18.         />
  19.         <button type="submit">
  20.           {children}
  21.         </button>
  22.       </form>
  23. # leanpub-start-insert
  24.     );
  25.   }
  26. }
  27. # leanpub-end-insert

The this object of an ES6 class component helps us to reference the DOM node with the ref attribute.

{title=”src/App.js”,lang=javascript}

  1. class Search extends Component {
  2.   render() {
  3.     const {
  4.       value,
  5.       onChange,
  6.       onSubmit,
  7.       children
  8.     } = this.props;
  10.     return (
  11.       <form onSubmit={onSubmit}>
  12.         <input
  13.           type="text"
  14.           value={value}
  15.           onChange={onChange}
  16. # leanpub-start-insert
  17.           ref={(node) => { this.input = node; }}
  18. # leanpub-end-insert
  19.         />
  20.         <button type="submit">
  21.           {children}
  22.         </button>
  23.       </form>
  24.     );
  25.   }
  26. }

Now you can focus the input field when the component mounted by using the this object, the appropriate lifecycle method, and the DOM API.

{title=”src/App.js”,lang=javascript}

  1. class Search extends Component {
  2. # leanpub-start-insert
  3.   componentDidMount() {
  4.     if(this.input) {
  5.       this.input.focus();
  6.     }
  7.   }
  8. # leanpub-end-insert
  10.   render() {
  11.     const {
  12.       value,
  13.       onChange,
  14.       onSubmit,
  15.       children
  16.     } = this.props;
  18.     return (
  19.       <form onSubmit={onSubmit}>
  20.         <input
  21.           type="text"
  22.           value={value}
  23.           onChange={onChange}
  24.           ref={(node) => { this.input = node; }}
  25.         />
  26.         <button type="submit">
  27.           {children}
  28.         </button>
  29.       </form>
  30.     );
  31.   }
  32. }

The input field should be focused when the application renders. That’s it basically for using the ref attribute.

But how would you get access to the ref in a functional stateless component without the this object? The following functional stateless component demonstrates it.

{title=”src/App.js”,lang=javascript}

  1. const Search = ({
  2.   value,
  3.   onChange,
  4.   onSubmit,
  5.   children
  6. }) => {
  7. # leanpub-start-insert
  8.   let input;
  9. # leanpub-end-insert
  10.   return (
  11.     <form onSubmit={onSubmit}>
  12.       <input
  13.         type="text"
  14.         value={value}
  15.         onChange={onChange}
  16. # leanpub-start-insert
  17.         ref={(node) => input = node}
  18. # leanpub-end-insert
  19.       />
  20.       <button type="submit">
  21.         {children}
  22.       </button>
  23.     </form>
  24.   );
  25. }

Now you would be able to access the input DOM element. In the example of the focus use case it wouldn’t help you, because you have no lifecycle method in a functional stateless component to trigger the focus. But in the future you might come across other use cases where it can make sense to use a functional stateless component with the ref attribute.

Exercises

Loading …

Now let’s get back to the application. You might want to show a loading indicator when you submit a search request to the Hacker News API. The request is asynchronous and you should show your user some feedback that something is about to happen. Let’s define a reusable Loading component in your src/App.js file.

{title=”src/App.js”,lang=javascript}

  1. const Loading = () =>
  2.   <div>Loading ...</div>

Now you will need a property to store the loading state. Based on the loading state you can decide to show the Loading component later on.

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   constructor(props) {
  4.     super(props);
  6.     this.state = {
  7.       results: null,
  8.       searchKey: '',
  9.       searchTerm: DEFAULT_QUERY,
  10.       error: null,
  11. # leanpub-start-insert
  12.       isLoading: false,
  13. # leanpub-end-insert
  14.     };
  16.     ...
  17.   }
  19.   ...
  21. }

The initial value of that isLoading property is false. You don’t load anything before the App component is mounted.

When you make the request, you set a loading state to true. Eventually the request will succeed and you can set the loading state to false.

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   ...
  5.   setSearchTopStories(result) {
  6.     ...
  8.     this.setState({
  9.       results: {
  10.         ...results,
  11.         [searchKey]: { hits: updatedHits, page }
  12.       },
  13. # leanpub-start-insert
  14.       isLoading: false
  15. # leanpub-end-insert
  16.     });
  17.   }
  19.   fetchSearchTopStories(searchTerm, page = 0) {
  20. # leanpub-start-insert
  21.     this.setState({ isLoading: true });
  22. # leanpub-end-insert
  24.     fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM_SEARCH}${searchTerm}&${PARAM_PAGE}${page}&${PARAM_HPP}${DEFAULT_HPP}`)
  25.       .then(response => response.json())
  26.       .then(result => this.setSearchTopStories(result))
  27.       .catch(e => this.setState({ error: e }));
  28.   }
  30.   ...
  32. }

In the last step, you will use the Loading component in your App. A conditional rendering based on the loading state will decide whether you show a Loading component or the Button component. The latter one is your button to fetch more data.

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   ...
  5.   render() {
  6.     const {
  7.       searchTerm,
  8.       results,
  9.       searchKey,
  10.       error,
  11. # leanpub-start-insert
  12.       isLoading
  13. # leanpub-end-insert
  14.     } = this.state;
  16.     ...
  18.     return (
  19.       <div className="page">
  20.         ...
  21.         <div className="interactions">
  22. # leanpub-start-insert
  23.           { isLoading
  24.             ? <Loading />
  25.             : <Button
  26.               onClick={() => this.fetchSearchTopStories(searchKey, page + 1)}>
  27.               More
  28.             </Button>
  29.           }
  30. # leanpub-end-insert
  31.         </div>
  32.       </div>
  33.     );
  34.   }
  35. }

Initially the Loading component will show up when you start your application, because you make a request on componentDidMount(). There is no Table component, because the list is empty. When the response returns from the Hacker News API, the result is shown, the loading state is set to false and the Loading component disappears. Instead, the “More” button to fetch more data appears. Once you fetch more data, the button will disappear again and the Loading component will show up.

Exercises:

  • use a library such as Font Awesome to show a loading icon instead of the “Loading …” text

Higher Order Components

Higher order components (HOC) are an advanced concept in React. HOCs are an equivalent to higher order functions. They take any input - most of the time a component, but also optional arguments - and return a component as output. The returned component is an enhanced version of the input component and can be used in your JSX.

HOCs are used for different use cases. They can prepare properties, manage state or alter the representation of a component. One use case could be to use a HOC as a helper for a conditional rendering. Imagine you have a List component that renders a list of items or nothing, because the list is empty or null. The HOC could shield away that the list would render nothing when there is no list. On the other hand, the plain List component doesn’t need to bother anymore about an non existent list. It only cares about rendering the list.

Let’s do a simple HOC which takes a component as input and returns a component. You can place it in your src/App.js file.

{title=”src/App.js”,lang=javascript}

  1. function withFoo(Component) {
  2.   return function(props) {
  3.     return <Component { ...props } />;
  4.   }
  5. }

One neat convention is to prefix the naming of a HOC with with. Since you are using JavaScript ES6, you can express the HOC more concisely with an ES6 arrow function.

{title=”src/App.js”,lang=javascript}

  1. const withFoo = (Component) => (props) =>
  2.   <Component { ...props } />

In the example, the input component would stay the same as the output component. Nothing happens. It renders the same component instance and passes all of the props to the output component. But that’s useless. Let’s enhance the output component. The output component should show the Loading component, when the loading state is true, otherwise it should show the input component. A conditional rendering is a great use case for a HOC.

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. const withLoading = (Component) => (props) =>
  3.   props.isLoading
  4.     ? <Loading />
  5.     : <Component { ...props } />
  6. # leanpub-end-insert

Based on the loading property you can apply a conditional rendering. The function will return the Loading component or the input component.

In general it can be very efficient to spread an object, like the props object in the previous example, as input for a component. See the difference in the following code snippet.

{title=”Code Playground”,lang=”javascript”}

  1. // before you would have to destructure the props before passing them
  2. const { foo, bar } = props;
  3. <SomeComponent foo={foo} bar={bar} />
  5. // but you can use the object spread operator to pass all object properties
  6. <SomeComponent { ...props } />

There is one little thing that you should avoid. You pass all the props including the isLoading property, by spreading the object, into the input component. However, the input component may not care about the isLoading property. You can use the ES6 rest destructuring to avoid it.

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. const withLoading = (Component) => ({ isLoading, ...rest }) =>
  3.   isLoading
  4.     ? <Loading />
  5.     : <Component { ...rest } />
  6. # leanpub-end-insert

It takes one property out of the object, but keeps the remaining object. It works with multiple properties as well. You might have already read about it in the destructuring assignment.

Now you can use the HOC in your JSX. An use case in the application could be to show either the “More” button or the Loading component. The Loading component is already encapsulated in the HOC, but an input component is missing. In the use case of showing a Button component or a Loading component, the Button is the input component of the HOC. The enhanced output component is a ButtonWithLoading component.

{title=”src/App.js”,lang=javascript}

  1. const Button = ({ onClick, className = '', children }) =>
  2.   <button
  3.     onClick={onClick}
  4.     className={className}
  5.     type="button"
  6.   >
  7.     {children}
  8.   </button>
  10. const Loading = () =>
  11.   <div>Loading ...</div>
  13. const withLoading = (Component) => ({ isLoading, ...rest }) =>
  14.   isLoading
  15.     ? <Loading />
  16.     : <Component { ...rest } />
  18. # leanpub-start-insert
  19. const ButtonWithLoading = withLoading(Button);
  20. # leanpub-end-insert

Everything is defined now. As a last step, you have to use the ButtonWithLoading component, which receives the loading state as an additional property. While the HOC consumes the loading property, all other props get passed to the Button component.

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   ...
  5.   render() {
  6.     ...
  7.     return (
  8.       <div className="page">
  9.         ...
  10.         <div className="interactions">
  11. # leanpub-start-insert
  12.           <ButtonWithLoading
  13.             isLoading={isLoading}
  14.             onClick={() => this.fetchSearchTopStories(searchKey, page + 1)}>
  15.             More
  16.           </ButtonWithLoading>
  17. # leanpub-end-insert
  18.         </div>
  19.       </div>
  20.     );
  21.   }
  22. }

When you run your tests again, you will notice that your snapshot test for the App component fails. The diff might look like the following on the command line:

{title=”Command Line”,lang=”text”}

  1. -    <button
  2. -      className=""
  3. -      onClick={[Function]}
  4. -      type="button"
  5. -    >
  6. -      More
  7. -    </button>
  8. +    <div>
  9. +      Loading ...
  10. +    </div>

You can either fix the component now, when you think there is something wrong about it, or can accept the new snapshot of it. Because you introduced the Loading component in this chapter, you can accept the altered snapshot test on the command line in the interactive test.

Higher order components are an advanced technique in React. They have multiple purposes like improved reusability of components, greater abstraction, composability of components and manipulations of props, state and view. Don’t worry if you don’t understand them immediately. It takes time to get used to them.

I encourage you to read the gentle introduction to higher order components. It gives you another approach to learn them, shows you an elegant way to use them a functional programming way and solves specifically the problem of conditional rendering with higher order components.

Exercises:

Advanced Sorting

You have already implemented a client- and server-side search interaction. Since you have a Table component, it would make sense to enhance the Table with advanced interactions. What about introducing a sort functionality for each column by using the column headers of the Table?

It would be possible to write your own sort function, but personally I prefer to use a utility library for such cases. Lodash is one of these utility libraries, but you can use whatever library suits you. Let’s install Lodash and use it for the sort functionality.

{title=”Command Line”,lang=”text”}

  1. npm install lodash

Now you can import the sort functionality of Lodash in your src/App.js file.

{title=”src/App.js”,lang=javascript}

  1. import React, { Component } from 'react';
  2. import fetch from 'isomorphic-fetch';
  3. # leanpub-start-insert
  4. import { sortBy } from 'lodash';
  5. # leanpub-end-insert
  6. import './App.css';

You have several columns in your Table. There are title, author, comments and points columns. You can define sort functions whereas each function takes a list and returns a list of items sorted by a specific property. Additionally, you will need one default sort function which doesn’t sort but only returns the unsorted list. That will be your initial state.

{title=”src/App.js”,lang=javascript}

  1. ...
  3. # leanpub-start-insert
  4. const SORTS = {
  5.   NONE: list => list,
  6.   TITLE: list => sortBy(list, 'title'),
  7.   AUTHOR: list => sortBy(list, 'author'),
  8.   COMMENTS: list => sortBy(list, 'num_comments').reverse(),
  9.   POINTS: list => sortBy(list, 'points').reverse(),
  10. };
  11. # leanpub-end-insert
  13. class App extends Component {
  14.   ...
  15. }
  16. ...

You can see that two of the sort functions return a reversed list. That’s because you want to see the items with the highest comments and points rather than to see the items with the lowest counts when you sort the list for the first time.

The SORTS object allows you to reference any sort function now.

Again your App component is responsible for storing the state of the sort. The initial state will be the initial default sort function, which doesn’t sort at all and returns the input list as output.

{title=”src/App.js”,lang=javascript}

  1. this.state = {
  2.   results: null,
  3.   searchKey: '',
  4.   searchTerm: DEFAULT_QUERY,
  5.   error: null,
  6.   isLoading: false,
  7. # leanpub-start-insert
  8.   sortKey: 'NONE',
  9. # leanpub-end-insert
  10. };

Once you choose a different sortKey, let’s say the AUTHOR key, you will sort the list with the appropriate sort function from the SORTS object.

Now you can define a new class method in your App component that simply sets a sortKey to your local component state. Afterward, the sortKey can be used to retrieve the sorting function to apply it on your list.

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   constructor(props) {
  5.     ...
  7.     this.needsToSearchTopStories = this.needsToSearchTopStories.bind(this);
  8.     this.setSearchTopStories = this.setSearchTopStories.bind(this);
  9.     this.fetchSearchTopStories = this.fetchSearchTopStories.bind(this);
  10.     this.onSearchSubmit = this.onSearchSubmit.bind(this);
  11.     this.onSearchChange = this.onSearchChange.bind(this);
  12.     this.onDismiss = this.onDismiss.bind(this);
  13. # leanpub-start-insert
  14.     this.onSort = this.onSort.bind(this);
  15. # leanpub-end-insert
  16.   }
  18. # leanpub-start-insert
  19.   onSort(sortKey) {
  20.     this.setState({ sortKey });
  21.   }
  22. # leanpub-end-insert
  24.   ...
  26. }

The next step is to pass the method and sortKey to your Table component.

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   ...
  5.   render() {
  6.     const {
  7.       searchTerm,
  8.       results,
  9.       searchKey,
  10.       error,
  11.       isLoading,
  12. # leanpub-start-insert
  13.       sortKey
  14. # leanpub-end-insert
  15.     } = this.state;
  17.     ...
  19.     return (
  20.       <div className="page">
  21.         ...
  22.         <Table
  23.           list={list}
  24. # leanpub-start-insert
  25.           sortKey={sortKey}
  26.           onSort={this.onSort}
  27. # leanpub-end-insert
  28.           onDismiss={this.onDismiss}
  29.         />
  30.         ...
  31.       </div>
  32.     );
  33.   }
  34. }

The Table component is responsible for sorting the list. It takes one of the SORT functions by sortKey and passes the list as input. Afterward it keeps mapping over the sorted list.

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. const Table = ({
  3.   list,
  4.   sortKey,
  5.   onSort,
  6.   onDismiss
  7. }) =>
  8. # leanpub-end-insert
  9.   <div className="table">
  10. # leanpub-start-insert
  11.     {SORTS[sortKey](list).map(item =>
  12. # leanpub-end-insert
  13.       <div key={item.objectID} className="table-row">
  14.         ...
  15.       </div>
  16.     )}
  17.   </div>

In theory the list would get sorted by one of the functions. But the default sort is set to NONE, so nothing is sorted yet. So far, no one executes the onSort() method to change the sortKey. Let’s extend the Table with a row of column headers that use Sort components in columns to sort each column.

{title=”src/App.js”,lang=javascript}

  1. const Table = ({
  2.   list,
  3.   sortKey,
  4.   onSort,
  5.   onDismiss
  6. }) =>
  7.   <div className="table">
  8. # leanpub-start-insert
  9.     <div className="table-header">
  10.       <span style={{ width: '40%' }}>
  11.         <Sort
  12.           sortKey={'TITLE'}
  13.           onSort={onSort}
  14.         >
  15.           Title
  16.         </Sort>
  17.       </span>
  18.       <span style={{ width: '30%' }}>
  19.         <Sort
  20.           sortKey={'AUTHOR'}
  21.           onSort={onSort}
  22.         >
  23.           Author
  24.         </Sort>
  25.       </span>
  26.       <span style={{ width: '10%' }}>
  27.         <Sort
  28.           sortKey={'COMMENTS'}
  29.           onSort={onSort}
  30.         >
  31.           Comments
  32.         </Sort>
  33.       </span>
  34.       <span style={{ width: '10%' }}>
  35.         <Sort
  36.           sortKey={'POINTS'}
  37.           onSort={onSort}
  38.         >
  39.           Points
  40.         </Sort>
  41.       </span>
  42.       <span style={{ width: '10%' }}>
  43.         Archive
  44.       </span>
  45.     </div>
  46. # leanpub-end-insert
  47.     {SORTS[sortKey](list).map(item =>
  48.       ...
  49.     )}
  50.   </div>

Each Sort component gets a specific sortKey and the general onSort() function. Internally it calls the method with the sortKey to set the specific key.

{title=”src/App.js”,lang=javascript}

  1. const Sort = ({ sortKey, onSort, children }) =>
  2.   <Button onClick={() => onSort(sortKey)}>
  3.     {children}
  4.   </Button>

As you can see, the Sort component reuses your common Button component. On a button click each individual passed sortKey will get set by the onSort() method. Now you should be able to sort the list when you click on the column headers.

There is one minor improvement for an improved look. So far, the button in a column header looks a bit silly. Let’s give the button in the Sort component a proper className.

{title=”src/App.js”,lang=javascript}

  1. const Sort = ({ sortKey, onSort, children }) =>
  2. # leanpub-start-insert
  3.   <Button
  4.     onClick={() => onSort(sortKey)}
  5.     className="button-inline"
  6.   >
  7. # leanpub-end-insert
  8.     {children}
  9.   </Button>

It should look nice now. The next goal would be to implement a reverse sort as well. The list should get reverse sorted once you click a Sort component twice. First, you need to define the reverse state with a boolean. The sort can be either reversed or non reversed.

{title=”src/App.js”,lang=javascript}

  1. this.state = {
  2.   results: null,
  3.   searchKey: '',
  4.   searchTerm: DEFAULT_QUERY,
  5.   error: null,
  6.   isLoading: false,
  7.   sortKey: 'NONE',
  8. # leanpub-start-insert
  9.   isSortReverse: false,
  10. # leanpub-end-insert
  11. };

Now in your sort method, you can evaluate if the list is reverse sorted. It is reverse if the sortKey in the state is the same as the incoming sortKey and the reverse state is not already set to true.

{title=”src/App.js”,lang=javascript}

  1. onSort(sortKey) {
  2. # leanpub-start-insert
  3.   const isSortReverse = this.state.sortKey === sortKey && !this.state.isSortReverse;
  4.   this.setState({ sortKey, isSortReverse });
  5. # leanpub-end-insert
  6. }

Again you can pass the reverse prop to your Table component.

{title=”src/App.js”,lang=javascript}

  1. class App extends Component {
  3.   ...
  5.   render() {
  6.     const {
  7.       searchTerm,
  8.       results,
  9.       searchKey,
  10.       error,
  11.       isLoading,
  12.       sortKey,
  13. # leanpub-start-insert
  14.       isSortReverse
  15. # leanpub-end-insert
  16.     } = this.state;
  18.     ...
  20.     return (
  21.       <div className="page">
  22.         ...
  23.         <Table
  24.           list={list}
  25.           sortKey={sortKey}
  26. # leanpub-start-insert
  27.           isSortReverse={isSortReverse}
  28. # leanpub-end-insert
  29.           onSort={this.onSort}
  30.           onDismiss={this.onDismiss}
  31.         />
  32.         ...
  33.       </div>
  34.     );
  35.   }
  36. }

The Table has to have an arrow function block body to compute the data now.

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. const Table = ({
  3.   list,
  4.   sortKey,
  5.   isSortReverse,
  6.   onSort,
  7.   onDismiss
  8. }) => {
  9.   const sortedList = SORTS[sortKey](list);
  10.   const reverseSortedList = isSortReverse
  11.     ? sortedList.reverse()
  12.     : sortedList;
  14.   return(
  15. # leanpub-end-insert
  16.     <div className="table">
  17.       <div className="table-header">
  18.         ...
  19.       </div>
  20. # leanpub-start-insert
  21.       {reverseSortedList.map(item =>
  22. # leanpub-end-insert
  23.         ...
  24.       )}
  25.     </div>
  26. # leanpub-start-insert
  27.   );
  28. }
  29. # leanpub-end-insert

The reverse sort should work now.

Last but not least, you have to deal with one open question for the sake of an improved user experience. Can a user distinguish which column is actively sorted? So far, it is not possible. Let’s give the user a visual feedback.

Each Sort component gets its specific sortKey already. It could be used to identify the activated sort. You can pass the sortKey from the internal component state as active sort key to your Sort component.

{title=”src/App.js”,lang=javascript}

  1. const Table = ({
  2.   list,
  3.   sortKey,
  4.   isSortReverse,
  5.   onSort,
  6.   onDismiss
  7. }) => {
  8.   const sortedList = SORTS[sortKey](list);
  9.   const reverseSortedList = isSortReverse
  10.     ? sortedList.reverse()
  11.     : sortedList;
  13.   return(
  14.     <div className="table">
  15.       <div className="table-header">
  16.         <span style={{ width: '40%' }}>
  17.           <Sort
  18.             sortKey={'TITLE'}
  19.             onSort={onSort}
  20. # leanpub-start-insert
  21.             activeSortKey={sortKey}
  22. # leanpub-end-insert
  23.           >
  24.             Title
  25.           </Sort>
  26.         </span>
  27.         <span style={{ width: '30%' }}>
  28.           <Sort
  29.             sortKey={'AUTHOR'}
  30.             onSort={onSort}
  31. # leanpub-start-insert
  32.             activeSortKey={sortKey}
  33. # leanpub-end-insert
  34.           >
  35.             Author
  36.           </Sort>
  37.         </span>
  38.         <span style={{ width: '10%' }}>
  39.           <Sort
  40.             sortKey={'COMMENTS'}
  41.             onSort={onSort}
  42. # leanpub-start-insert
  43.             activeSortKey={sortKey}
  44. # leanpub-end-insert
  45.           >
  46.             Comments
  47.           </Sort>
  48.         </span>
  49.         <span style={{ width: '10%' }}>
  50.           <Sort
  51.             sortKey={'POINTS'}
  52.             onSort={onSort}
  53. # leanpub-start-insert
  54.             activeSortKey={sortKey}
  55. # leanpub-end-insert
  56.           >
  57.             Points
  58.           </Sort>
  59.         </span>
  60.         <span style={{ width: '10%' }}>
  61.           Archive
  62.         </span>
  63.       </div>
  64.       {reverseSortedList.map(item =>
  65.           ...
  66.       )}
  67.     </div>
  68.   );
  69. }

Now in your Sort component, you know based on the sortKey and activeSortKey whether the sort is active. Give your Sort component an extra className attribute, in case it is sorted, to give the user a visual feedback.

{title=”src/App.js”,lang=javascript}

  1. # leanpub-start-insert
  2. const Sort = ({
  3.   sortKey,
  4.   activeSortKey,
  5.   onSort,
  6.   children
  7. }) => {
  8.   const sortClass = ['button-inline'];
  10.   if (sortKey === activeSortKey) {
  11.     sortClass.push('button-active');
  12.   }
  14.   return (
  15.     <Button
  16.       onClick={() => onSort(sortKey)}
  17.       className={sortClass.join(' ')}
  18.     >
  19.       {children}
  20.     </Button>
  21.   );
  22. }
  23. # leanpub-end-insert

The way to define the sortClass is a bit clumsy, isn’t it? There is a neat little library to get rid of this. First you have to install it.

{title=”Command Line”,lang=”text”}

  1. npm install classnames

And second you have to import it on top of your src/App.js file.

{title=”src/App.js”,lang=javascript}

  1. import React, { Component } from 'react';
  2. import fetch from 'isomorphic-fetch';
  3. import { sortBy } from 'lodash';
  4. # leanpub-start-insert
  5. import classNames from 'classnames';
  6. # leanpub-end-insert
  7. import './App.css';

Now you can use it to define your component className with conditional classes.

{title=”src/App.js”,lang=javascript}

  1. const Sort = ({
  2.   sortKey,
  3.   activeSortKey,
  4.   onSort,
  5.   children
  6. }) => {
  7. # leanpub-start-insert
  8.   const sortClass = classNames(
  9.     'button-inline',
  10.     { 'button-active': sortKey === activeSortKey }
  11.   );
  12. # leanpub-end-insert
  14.   return (
  15. # leanpub-start-insert
  16.     <Button
  17.       onClick={() => onSort(sortKey)}
  18.       className={sortClass}
  19.     >
  20. # leanpub-end-insert
  21.       {children}
  22.     </Button>
  23.   );
  24. }

Again, when you run your tests, you should see failing snapshot tests but also failing unit tests for the Table component. Since you changed again your component representations, you can accept the snapshot tests. But you have to fix the unit test. In your src/App.test.js file, you need to provide a sortKey and the isSortReverse boolean for the Table component.

{title=”src/App.test.js”,lang=javascript}

  1. ...
  3. describe('Table', () => {
  5.   const props = {
  6.     list: [
  7.       { title: '1', author: '1', num_comments: 1, points: 2, objectID: 'y' },
  8.       { title: '2', author: '2', num_comments: 1, points: 2, objectID: 'z' },
  9.     ],
  10. # leanpub-start-insert
  11.     sortKey: 'TITLE',
  12.     isSortReverse: false,
  13. # leanpub-end-insert
  14.   };
  16.   ...
  18. });

Once again you might need to accept the failing snapshot tests for your Table component, because you provided extended props for the Table component.

Finally your advanced sort interaction is complete now.

Exercises:

  • use a library like Font Awesome to indicate the (reverse) sort
    • it could be an arrow up or arrow down icon next to each Sort header
  • read more about the classnames library

{pagebreak}

You have learned advanced component techniques in React! Let’s recap the last chapters:

  • React
    • the ref attribute to reference DOM nodes
    • higher order components are a common way to build advanced components
    • implementation of advanced interactions in React
    • conditional classNames with a neat helper library
  • ES6
    • rest destructuring to split up objects and arrays

You can find the source code in the official repository.