title: Select onChange link to value - ReactJS
body: <p>How can I link to a <code>value</code> when selected <code>onChange</code> in a select box?</p>
  
  <p>Looking to implement a <code>select</code> menu into <strong>ReactJS</strong> that links to the <code>value</code> <code>onChange</code>. </p>
  
  <pre><code>render() {
     return (
        &lt;select onChange={() =&gt; {if (this.value) window.location.href=this.value}}&gt;
          &lt;option value=""&gt;Please select&lt;/option&gt;
          {pages.map(({ node: page })=&gt; (
            &lt;option key={page.id} value="{page.slug}"&gt;{page.title}&lt;/option&gt;
          ))}
        &lt;/select&gt;
      );
  }
  </code></pre>
  
  <p>This is getting the value (I believe) but I keep getting the error of <code>Cannot read property 'value' of undefined</code></p>
  
  <p>I have tried following the documents <a href="https://reactjs.org/docs/forms.html" rel="nofollow noreferrer">here</a> as suggested in some answers yet I have not been able to get this working with my current code - see as follows the full Page.js</p>
  
  <pre><code>import React from 'react'
  import Helmet from 'react-helmet'
  import styled from 'styled-components'
  import config from '../utils/siteConfig'
  
  const PageCompany = ({data}) =&gt; {
  
    const {title,slug} = data.contentfulCompanyPage;
    const pages = data.allContentfulCompanyPage.edges;
  
    return(
      &lt;Wrapper&gt;
        &lt;CompanyMenu&gt;
          &lt;div&gt;
            &lt;select onChange={() =&gt; {if (this.value) window.location.href=this.value}}&gt;
              &lt;option value=""&gt;Please select&lt;/option&gt;
              {pages.map(({ node: page })=&gt; (
                &lt;option key={page.id} value="{page.slug}"&gt;{page.title}&lt;/option&gt;
              ))}   
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/CompanyMenu&gt;
      &lt;/Wrapper&gt;
    )
  }
  
  export const companyQuery = graphql`
    query companyQuery($slug: String!) {
      contentfulCompanyPage(slug: {eq: $slug}) {
        title
        slug
        keywords
        description
        heroBg {
          sizes(maxWidth: 1500) {
            src
          }
        }
      }
      allContentfulCompanyPage(sort: {fields: [menuOrder], order: ASC}) {
        edges {
          node {
            id
            title
            slug
          }
        }
      }
    }
  `
  
  export default PageCompany
  </code></pre>