React: Up & Running, 2nd Edition

Chapter 4. Functional Excel

Remember function components? At some point in Chapter 2, as soon as state came into the picture, function components dropped out of the discussion. It’s time to bring them back.

A Quick Refresher: Function versus Class Components

In its simplest form a class component only needs one render() method. This is where you build the UI, optionally using this.props and this.state:

class Widget extends React.Component {
  render() {
    let ui;
    // fun with this.props and this.state
    return <div>{ui}</div>;
  }
}

In a function component the whole component is the function and the UI is whatever the function returns. The props are passed to the function when the component is constructed:

function Widget(props) {
    let ui;
    // fun with props but where's the state?
    return <div>{ui}</div>;
}

The usefulness of function components ended with React v16.8: you can use them only for components that don’t maintain state (stateless components). But with the addition of hooks in v16.8, it’s now possible to use function components everywhere. Through the rest of this chapter you’ll see how the Excel component from Chapter 3 can be implemented as a function component.

Rendering the Data

The first step is to render the data passed to the component (Figure 4-1). How the component is used doesn’t change. In other words, a developer using your component doesn’t need to know if it’s a class or a function component. The initialData and headers props look the same. Even the propTypes definitions ...