Alex Banks, Eve Porcello - Learning React_ Functional Web Development with React and Redux-O’Reilly Media (2017)

const Color = ({title,color,rating=0,onRemove=f=>f,onRate=f=>f}) => <section className=\"color\"> <h1>{title}</h1> <button onClick={onRemove}>X</button> <div className=\"color\" style={{ backgroundColor: color }}> </div> <div> <StarRating starsSelected={rating} onRate={onRate} /> </div> </section> The information that will change in this app is all stored in the list of colors. There‐ fore, onRemove and onRate callback properties will have to be added to each color to pass those events back up the tree. The Color component will also have an onRate and onRemove callback function properties. When colors are rated or removed, the ColorList component will need to notify its parent, the App, that the color should be rated or removed. const ColorList = ({ colors=[], onRate=f=>f, onRemove=f=>f }) => <div className=\"color-list\"> {(colors.length === 0) ? <p>No Colors Listed. (Add a Color)</p> : colors.map(color => <Color key={color.id} {...color} onRate={(rating) => onRate(color.id, rating)} onRemove={() => onRemove(color.id)} /> ) } </div> The ColorList will invoke onRate() if any colors are rated and onRemove() if any col‐ ors are removed. This component manages the collection of colors by mapping them to individual color components. When individual colors are rated or removed the ColorList identifies which color was rated or removed and passes that info to its par‐ ent via callback function properties. The ColorList’s parent is the App. In the App Component, methods for rateColor() or removeColor() can be added and bound to the component instance in the con‐ structor. Anytime a color needs to be rated or removed, these methods will update the state. They are added to the ColorList component as callback function properties. class App extends Component { constructor(props) { super(props) this.state = { colors: [] } this.addColor = this.addColor.bind(this) State within the component tree | 149

this.rateColor = this.rateColor.bind(this) this.removeColor = this.removeColor.bind(this) } addColor(title, color) { const colors = [ ...this.state.colors, { id: v4(), title, color, rating: 0 } ] this.setState({colors}) } rateColor(id, rating) { const colors = this.state.colors.map(color => (color.id !== id) ? color : { ...color, rating } ) this.setState({colors}) } removeColor(id) { const colors = this.state.colors.filter( color => color.id !== id ) this.setState({colors}) } render() { const { addColor, rateColor, removeColor } = this const { colors } = this.state return ( <div className=\"app\"> <AddColorForm onNewColor={addColor} /> <ColorList colors={colors} onRate={rateColor} onRemove={removeColor} /> </div> ) } } 150 | Chapter 6: Props, State, and the Component Tree

Both rateColor() and removeColor() expect the id of the color to rate or remove. The id is captured in the ColorList component and passed as an argument to rate‐ Color or removeColor. The rateColor method finds the color to rate and changes it’s rating in state. The removeColor method uses Array.filter to create a new state array that removes the removed color. Once setState is called, the UI is re-rendered with the new state data. All data that changes in this app is managed from a single component, the App. This approach makes it much easier to understand what data the application uses to create state and how that data will change. React components are quite robust. They provide us with a clean way to manage and validate properties, communicate with child elements, and manage state data from within a component. These features make it possible to construct beautifully scalable presentation layers. We have mentioned many times that state data is for data that changes. You can also use state to cache data in your application. For instance, if you had a list of records that the user could search, the records list could be stored in state until they are searched. Reducing state to root components is often recommended, and you will encounter this approach in many React applications. Once your application reaches a certain size, two-way data binding and explicitly passing properties can become quite a nui‐ sance. The Flux design pattern and Flux libraries like Redux can be used to manage state and reduce boilerplate in these situations. React is a relatively small library, and thus far we’ve reviewed much of its functional‐ ity. The major features of React Components that we have yet to discuss include: the component lifecycle and higher order components which we will cover in the next chapter. State within the component tree | 151