Removed unnecessary component state, used props instead (#20791)

* changed deprecated method componentWillReceiveProps to getDerivedStateFromProps, checked for props changes to trigger updates

* Removed unnecessary component state, used props instead

docs/blog/2017-10-17-building-i18n-with-gatsby/index.md

@@ -231,24 +231,18 @@ import { translate } from "react-i18next"
 class LanguageSwitcher extends Component {
   constructor(props) {
     super(props)
-    const { i18n } = this.props
-    this.state = { language: i18n.language }
 
     this.handleChangeLanguage = this.handleChangeLanguage.bind(this)
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.setState({ language: nextProps.i18n.language })
-  }
-
   handleChangeLanguage(lng) {
     const { i18n } = this.props
     i18n.changeLanguage(lng)
   }
 
   renderLanguageChoice({ code, label }) {
     const buttonClass = classNames("LanguageSwitcher__button", {
-      "LanguageSwitcher__button--selected": this.state.language === code,
+      "LanguageSwitcher__button--selected": this.props.i18n.language === code,
     })
 
     return (
@@ -279,8 +273,8 @@ class LanguageSwitcher extends Component {
 export default translate("LanguageSwitcher")(LanguageSwitcher)
 ```
 
-This is a pretty simple component. We're setting the `language` state based on
-the i18n prop so that we can check which language is currently active and show
+This is a pretty small component. We're getting the `language` in the
+i18n prop so that we can check which language is currently active and show
 that in our menu.
 
 The `handleLanguageChange` function just wraps the `react-i18n` function passed