title: React Router and this.props: this.props.location.state is undefined
body: <p>I’m using React Router in my personal project in order to create a navigation menu and navigate through it. I’m trying to pass down state from my APP component to the Navigation Menu component and then to each section’s component, but I’m hitting a wall and I can’t figure out why…</p>
  
  <p>Here’s respectively the code for my App component, navigation menu component, and Dealers component (Dealers is a section available in the menu, on Click of the Dealers button).</p>
  
  <p>App component</p>
  
  <pre><code>import React from 'react';
  import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
  import './App.css';
  import NavMenu from '../NavMenu/NavMenu';
  import Dealers from '../Dealers/Dealers';
  import About from '../About/About';
  import Home from '../Home/Home';
  import LogoHeartbeat from './heartbeat_logo.png';
  import LogoLoveVinyl from './lvlogo.jpg';
  import Discogs from '../../util/Discogs/Discogs';
  
  
  class App extends React.Component{
    constructor(props){
      super(props);
      this.state={
        recoDetails:[],
        objectToRender:[],
        searchResults:[],
        dealersDb:[
        {
            name: 'Heartbeat Vinyl',
            location: 'Paris',
            address: '26 Rue Godefroy Cavaignac',
            open: 'from 12 pm to 8pm',
            holiday: 'Sunday',
            description:"Heartbeat Vinyl is a very cosy shop, offering a wide range of music. You'll find Jazz, Disco, House, Techno, Rock, Ambient, Soul, Funk, etc... One thing is sure, you can expect quality music from the owner Melik!",
            url: 'http://www.heartbeatvinyl.com/',
            logo: LogoHeartbeat,
            genre: ['Jazz','Rock','Disco','Funk','House','Japanese','Techno','Ambient'],
            id:'1',
            reco:['15179807','3447244','1559040'],
            recoInfo:[],
            video:[
                'https://www.youtube.com/embed/Zg1aJ0fhF2I',
                'https://www.youtube.com/embed/_C9ZNqNXODk',
                'https://www.youtube.com/embed/pgeTFQM1HV0',
                'https://www.youtube.com/embed/2ZJlYZEzYY0'
            ]
        },
        {
            name: 'Love Vinyl',
            location: 'London',
            address: '5 Pearson Street',
            open: 'from 11:30 am to 7pm',
            holiday: 'Monday',
            description:"Love Vinyl is an incredibly good record shop, offering a wide range of music. You'll find Jazz, Disco, House, Techno, Rock, Ambient, Soul, Funk, etc... One thing is sure, you can expect quality music from the owner Zaf!",
            url: 'https://www.lovevinyl.london/',
            logo: LogoLoveVinyl,
            genre: ['Jazz','Rock','Disco','Funk','House','Techno','Punk','Mods'],
            id:'2',
            reco:['2903013','1038746','13670323'],
            recoInfo:[]
        }
    ]
  };
  this.search=this.search.bind(this);
  this.changeState=this.changeState.bind(this);
  this.getRecoDetails=this.getRecoDetails.bind(this);
  
    }
    search(term){
      this.setState({
          searchResults: []
      });
  let tempArray= [];
  this.state.dealersDb.map(dealer=&gt;{
      if(term===dealer.name || term===dealer.location || dealer.genre.find(element=&gt;term===element)){
      tempArray.push(dealer);
      this.setState({
          searchResults: tempArray
      })
      }
  });
  }
  
  
      changeState(term) {
          let idToRender=[];
          this.state.dealersDb.map(dealer=&gt;{
          if(term===dealer.id){
              idToRender=[dealer];
              }});
          let recoToFind=idToRender[0].reco;
  
          recoToFind.map(item=&gt;{
              Discogs.search(item).then(response=&gt;{
                  if(idToRender[0].recoInfo.length&lt;recoToFind.length){
                  idToRender[0].recoInfo.push(response)}
                  this.setState({
                      objectToRender: idToRender
                  });
              })
          }) 
  }
  
  getRecoDetails(id){
      Discogs.search(id).then(response=&gt;{
          this.state.recoDetails.push(response)
          return(
          this.setState({recoDetails: this.state.recoDetails
         }))});
      }
  
    render(){
      return(
  &lt;Router&gt;
  &lt;div className="App"&gt;
    {console.log(this.state.dealersDb)}
      &lt;NavMenu dealers={this.state.dealersDb} show={this.state.objectToRender} getId={this.changeState} searchResults={this.state.searchResults} search={this.search}/&gt;
      &lt;Route path='/' exact component={Home}/&gt;
      &lt;Route path='/Dealers' component={Dealers}/&gt;
      &lt;Route path='/About' component={About}/&gt;
  &lt;/div&gt;
  &lt;/Router&gt;
  );
    }
  }
  
  
  export default App;
  </code></pre>
  
  <p>Here’s the NavMenu component</p>
  
  <pre><code>import React from 'react';
  import './NavMenu.css';
  import Dealers from '../Dealers/Dealers';
  import Home from '../Home/Home';
  import {Link} from 'react-router-dom';
  
  class NavMenu extends React.Component{
      render(){
          return(
  &lt;ul className="navigation"&gt;
      &lt;Link to="/" exact&gt;
      &lt;button className="home button" onClick={&lt;Home/&gt;}&gt;Home&lt;/button&gt;
      &lt;/Link&gt;
      &lt;Link to={{
          pathname:'/Dealers',
          state:{
          dealers: this.props.dealers,
          show:this.props.show,
          getId:this.props.getId,
          searchResults:this.props.searchResults,
          search:this.props.search,
      }}}&gt;
      {console.log(this.props.dealers)}
      &lt;button className="dealr button" onClick={&lt;Dealers/&gt;}&gt;Dealers&lt;/button&gt;
      &lt;/Link&gt;
      &lt;Link to="/VideoArchives"&gt;
      &lt;button className="videoArchives button"&gt;Video Archives&lt;/button&gt;
      &lt;/Link&gt;
      &lt;Link to="/About"&gt;
      &lt;button className="aboutUs button"&gt;About us&lt;/button&gt;
      &lt;/Link&gt;
  
  &lt;/ul&gt;)
      }
  }
  
  export default NavMenu;
  </code></pre>
  
  <p>and here’s the Dealers component</p>
  
  <pre><code>import React from 'react';
  import SearchBarDealers from '../SearchBarDealers/SearchBarDealers.js';
  import SearchDealersResults from '../SearchDealersResults/SearchDealersResults';
  import DealerDetailsList from '../DealerDetailsList/DealerDetailsList';
  import './Dealers.css';
  
  
  class Dealers extends React.Component{
  
  render(){
          return(
  
      &lt;div&gt;
          {console.log(this.props.location)}
          &lt;div className="OriginalComponents"&gt;
          &lt;SearchBarDealers onSearch={this.props.location.state.search}/&gt;
          &lt;div className="MainContainer"&gt;
              &lt;div className="SDResults"&gt;
          &lt;SearchDealersResults data={this.props.location.state.searchResults} getId={this.props.location.getId}/&gt;
          &lt;/div&gt;
          &lt;div className="DDList"&gt;
          &lt;DealerDetailsList show={this.props.location.state.show}/&gt;
          &lt;/div&gt;
          &lt;/div&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  
          );
      }
  }
  
  export default Dealers;
  </code></pre>
  
  <p>I’ve spent several hours on google, and it seems I’m declaring everything as it should be, yet when I console.log this.props.location in my Dealers component, it returns:</p>
  
  <pre><code>{pathname: "/Dealers", search: "", hash: "", state: undefined}
  hash: ""
  pathname: "/Dealers"
  search: ""
  state: undefined
  </code></pre>
  
  <p>So this means the states have not been recorded properly in the previous step. The console.log in my NavMenu for this.props.dealers returns the expected value, so this means when I declare:</p>
  
  <pre><code>&lt;Link to={{
          pathname:'/Dealers',
          state:{
          dealers: this.props.dealers,
          show:this.props.show,
          getId:this.props.getId,
          searchResults:this.props.searchResults,
          search:this.props.search,
      }}}&gt;
      {console.log(this.props.dealers)}
      &lt;button className="dealr button" onClick={&lt;Dealers/&gt;}&gt;Dealers&lt;/button&gt;
      &lt;/Link&gt;
  </code></pre>
  
  <p>each value of the state should be assigned a proper value. But somehow, it seems like it’s not working as expected…</p>
  
  <p>Could someone give me a hand with this? ^^;
  What am I doing wrong here?</p>