For example, if you haven’t added your Twitter account yet:<\/p>\n
![\"Connect](\"http:\/\/www.mageuzi.com\/blog\/wp-content\/uploads\/2016\/07\/twitter-button1.png\")
<\/p>\n
If you want to add your Twitter account, then we have to send you to the Twitter website to authenticate, so we display the following:<\/p>\n
![\"Redirect](\"http:\/\/www.mageuzi.com\/blog\/wp-content\/uploads\/2016\/07\/twitter-button2.png\")
<\/p>\n
And finally, if you’ve already connected your Twitter account:<\/p>\n
![\"Twitter](\"http:\/\/www.mageuzi.com\/blog\/wp-content\/uploads\/2016\/07\/twitter-button3.png\")
<\/p>\n
As you can see, this component revolves heavily around manipulating a button, so I knew that would be the primary element in the render.<\/p>\n
But thinking more generally, the second state with the busy indicator was something that jumped out as a component that I could use elsewhere on the site. So, I decided to build a “BusyButton” component which could be used both as part of this Twitter component but also on its own whenever I needed a button to display a “busy” state.<\/p>\n
So first, let’s make a BusyButton suitable for our Twitter component. As described in my earlier post, it’s best practice to store state in the outermost parent component. Child components just use their props. So, using that philosophy, we can build our BusyButton component like so:<\/p>\n
module.exports = React.createClass({\r\n\trender: function() {\r\n\t\tvar buttonStyle = \"btn-\" + this.props.style;\r\n\t\t\t\t\r\n\t\tif (this.props.busy)\r\n\t\t{\r\n\t\t\tvar busyLabel = this.props.busyLabel\r\n\t\t\t\t? React.DOM.span({style: {paddingLeft: 10}}, this.props.busyLabel)\r\n\t\t\t\t: \"\";\r\n\r\n\t\t\treturn React.DOM.button({className: \"btn \" + buttonStyle, style: {minWidth: 75}, disabled: \"disabled\"},\r\n\t\t\t\tReact.DOM.i({className: \"fa fa-circle-o-notch fa-spin\"}),\r\n\t\t\t\tbusyLabel\r\n\t\t\t);\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\tvar icon = this.props.icon\r\n\t\t\t\t? React.DOM.i({className: \"fa fa-\" + this.props.icon, style: {paddingRight: 10}})\r\n\t\t\t\t: \"\";\r\n\r\n\t\t\tvar attributes = {className: \"btn \" + buttonStyle, type: this.props.type, id: this.props.id, onClick: this.props.onClick};\r\n\t\t\t\r\n\t\t\tif (this.props.disabled) {\r\n\t\t\t\tattributes.disabled = \"disabled\";\r\n\t\t\t}\r\n\r\n\t\t\treturn React.DOM.button(attributes,\r\n\t\t\t\ticon,\r\n\t\t\t\tthis.props.label\r\n\t\t\t);\r\n\t\t}\r\n\t}\r\n});<\/code><\/pre>\nAs you can see, this component is driven entirely with props. If this is a child component, then that makes sense. If the parent gets rendered again, it will pass new props to the child, and the child’s behavior will change when it renders.<\/p>\n
So far so good.<\/p>\n
But now we come to our second acceptance criteria. We want this button to have the same behavior on its own: a button that can be marked as busy, and have the same disabled state and indicator icon.<\/p>\n
With our current component, we have to set everything with props. That’s fine for the component’s initial render, but if we want to change the component’s behavior after the fact, we have a problem. Props are supposed to be immutable — an initial state and nothing more. (see: Props in getInitialState Is an Anti-Pattern<\/a>)<\/p>\n