Reduce some boilerplate around React state
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> | |
) | |
} | |
} |
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> | |
) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
const { show = false } = this.state || {}
ratheralso, 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