title: React Router v4 - Cannot pass state as prop via <Link>
body: <p>Trying to use React Router v4 on the web to pass state from Component A as a prop to Component B. The following code returns this error: "TypeError: Cannot read property "state" of undefined." I removed all the component creation lines for brevity:</p>
  
  <pre><code>// Component A
  
  state = {
      selectedCountry: 'Gambia',
  }
  
  console.log(this.state.selectedCountry) // returns Gambia
  
  // this is where it fails to pass state
  &lt;Link to={{ 
      pathname: '/component-b', // correct path
      state: { selectedCountry: this.state.selectedCountry }
  }}&gt;
      &lt;button className="button"&gt;Button&lt;/button&gt;
  &lt;/Link&gt;
  
  
  
  // Component B
  
  componentWillMount() {
  
  // not received, sadly undefined
  console.log(this.props.location.state.selectedCountry)
  
  }
  </code></pre>
  
  <p>What am I missing here? Many thanks!</p>
  
  <p><strong>EDIT 1:</strong> Tried suggestion to initialize prop outside , but received same error of undefined</p>
  
  <pre><code>// Component A
  const selectedCountryProp = {
              pathname: '/trip-cards-container',
              state: { selectedCountry: this.state.selectedCountry }
          } 
  
  return (
      &lt;Link to={ selectedCountryProp }/&gt;  
      {console.log(selectedCountryProp.state.selectedCountry)} 
      // logs expected Gambia
         &lt;button className="button"&gt;Button&lt;/button&gt;
      &lt;/Link&gt;
      )
  
  // Component B
  componentWillMount() {
      console.log(this.props.location.state.selectedCountry)
      // logs cannot receive property of state of undefined
      // also tried with this.props.location.selectedCountryProp...
      // but logs cannot receive property of selectedCountryProp of
      // undefined
  }
  </code></pre>