Reduce some boilerplate around React state

oldandbusted.js

class Foo extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = { 
      show: false 
    }
  }
  
  handleClick = () => {
    this.setState({ show: true })
  }
  
  render() {
    const { show } = this.state
    
    return (
      <div>
        <Button onClick={this.handleClick}>Show More</Button>
        <Accordion show={show} />
      </div>
    )
  }
}

thenewhotness.js

class Bar extends Component {
  render() {
    const { show } = this.state || { show: false }
    
    return (
      <div>
        <Button onClick={() => this.setState({ show: true }))}>Show More</Button>
        <Accordion show={show} />
      </div>
    )
  }
}

const { show = false } = this.state || {} rather

also, using arrow functions as event handlers creates a new function every time so if Button uses pure render mixin or decorator it will re-render unnecessarily