Fix lint errors (#153)

* Lint removal: whitespace * Lint removal: semicolon * Lint removal: silence false-positive Quoting from https://reactjs.org/docs/react-component.html#componentdidupdate > componentDidUpdate(prevProps) { > // Typical usage (don't forget to compare props): > if (this.props.userID !== prevProps.userID) { > this.fetchData(this.props.userID); > } > } > > You may call **`setState()`** immediately in `componentDidUpdate()` > but note that **it must be wrapped in a condition** like in the > example above, or you’ll cause an infinite loop. It would also cause > an extra re-rendering which, while not visible to the user, can > affect the component performance. If you’re trying to “mirror” some > state to a prop coming from above, consider using the prop directly > instead. Read more about why copying props into state causes bugs. This particular use case is OK by those rules, so we disable the linting rule for that particular line and leave a comment explaining why.

Author: tremby

src/component/index.js

@@ -21,11 +21,15 @@ export default class Toggle extends PureComponent {
  }
  }
 
-componentDidUpdate (prevProps) {
-if (prevProps.checked !== this.props.checked) {
-this.setState({ checked: !!this.props.checked });
-}
-}
+ componentDidUpdate (prevProps) {
+ if (prevProps.checked !== this.props.checked) {
+ // Disable linting rule here since this usage of setState inside
+ // componentDidUpdate is OK; see
+ // https://reactjs.org/docs/react-component.html#componentdidupdate
+ // eslint-disable-next-line react/no-did-update-set-state
+ this.setState({ checked: !!this.props.checked })
+ }
+ }
 
  handleClick (event) {
  if (this.props.disabled) {

src/docs/index.js

@@ -40,8 +40,8 @@ class App extends Component {
  )
 
  this.state = {
-aubergineIsReady: true,
-checkedOverride: false,
+ aubergineIsReady: true,
+ checkedOverride: false,
  cheeseIsReady: false,
  baconIsReady: false,
  biscuitIsReady: false,
@@ -98,8 +98,8 @@ class App extends Component {
 
  <div className='example'>
  <label>
-<Toggle
-checked={this.state.checkedOverride}
+ <Toggle
+ checked={this.state.checkedOverride}
  defaultChecked={this.state.baconIsReady}
  onChange={this.handleBaconChange}
  />