React Design Patterns and Best Practices - Second Edition

Constants props

Let's keep on improving our list example, and see what happens when we add new features.

In this case, we will learn how to avoid a common error when using PureComponent, which makes it less effective.

Suppose we want to add a prop to our Item component, which represents a list of statuses that the item can have. There are many ways of implementing it, but our focus is more on the way we pass down the default values.

Change the render method of the List component as follows:

  render() {     return (       <div>         <ul>           {this.state.items.map(item => (             <Item               key={item}               item={item}               onClick={console.log}               statuses={['open', 'close']}             />           ))}         </ul>         <button onClick={this.handleClick}>+</button>       </div>     );  }

In the preceding code, ...