docs(ComponentSidebarSection): replace deprecated lifecycle methods (#3559)

* docs(ComponentSidebarSection): replace deprecated lifecycle methods * Update ComponentSidebarSection.js * Update ComponentSidebarSection.js

Author: grumblerchester

docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarSection.js

@@ -19,38 +19,30 @@ export default class ComponentSidebarSection extends PureComponent {
  onTitleClick: PropTypes.func,
  }
 
- constructor(props) {
- super(props)
- this.state = {
- isActiveByProps: this.isActiveAccordion(),
- }
- }
+ state = {}
 
- componentWillReceiveProps(nextProps) {
- const isActiveByProps = this.isActiveAccordion(nextProps)
- const didCloseByProps = this.state.isActiveByProps && !isActiveByProps
+ static getDerivedStateFromProps(props, state) {
+ const isActiveByProps = (props.examples || []).some((item) => {
+ const exampleHash = examplePathToHash(item.examplePath)
+ return exampleHash === props.activePath
+ })
+ const didCloseByProps = state.isActiveByProps && !isActiveByProps
 
  // We allow the user to open accordions, but we close them when we scroll passed them
- this.setState(prevState => ({
+ return {
  isActiveByProps,
- isActiveByUser: didCloseByProps ? false : prevState.isActiveByUser,
- }))
+ isActiveByUser: didCloseByProps ? false : state.isActiveByUser,
+ }
  }
 
- handleItemClick = examplePath => (e) => {
+ handleItemClick = (examplePath) => (e) => {
  _.invoke(this.props, 'onItemClick', e, { examplePath })
  }
 
  handleTitleClick = () => {
- this.setState(prevState => ({ isActiveByUser: !prevState.isActiveByUser }))
+ this.setState((prevState) => ({ isActiveByUser: !prevState.isActiveByUser }))
  }
 
- isActiveAccordion = (props = this.props) =>
- (props.examples || []).findIndex((item) => {
- const exampleHash = examplePathToHash(item.examplePath)
- return exampleHash === props.activePath
- }) !== -1
-
  render() {
  const { activePath, examples, sectionName } = this.props
  const { isActiveByProps, isActiveByUser } = this.state