Help with React Router and this.props

Hello

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…

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).

App component

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=>{
    if(term===dealer.name || term===dealer.location || dealer.genre.find(element=>term===element)){
    tempArray.push(dealer);
    this.setState({
        searchResults: tempArray
    })
    }
});
}


    changeState(term) {
        let idToRender=[];
        this.state.dealersDb.map(dealer=>{
        if(term===dealer.id){
            idToRender=[dealer];
            }});
        let recoToFind=idToRender[0].reco;
        
        recoToFind.map(item=>{
            Discogs.search(item).then(response=>{
                if(idToRender[0].recoInfo.length<recoToFind.length){
                idToRender[0].recoInfo.push(response)}
                this.setState({
                    objectToRender: idToRender
                });
            })
        }) 
}

getRecoDetails(id){
    Discogs.search(id).then(response=>{
        this.state.recoDetails.push(response)
        return(
        this.setState({recoDetails: this.state.recoDetails
       }))});
    }

  render(){
    return(
<Router>
<div className="App">
  {console.log(this.state.dealersDb)}
    <NavMenu dealers={this.state.dealersDb} show={this.state.objectToRender} getId={this.changeState} searchResults={this.state.searchResults} search={this.search}/>
    <Route path='/' exact component={Home}/>
    <Route path='/Dealers' component={Dealers}/>
    <Route path='/About' component={About}/>
</div>
</Router>
);
  }
}


export default App;

Here’s the NavMenu component

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(
<ul className="navigation">
    <Link to="/" exact>
    <button className="home button" onClick={<Home/>}>Home</button>
    </Link>
    <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,
    }}}>
    {console.log(this.props.dealers)}
    <button className="dealr button" onClick={<Dealers/>}>Dealers</button>
    </Link>
    <Link to="/VideoArchives">
    <button className="videoArchives button">Video Archives</button>
    </Link>
    <Link to="/About">
    <button className="aboutUs button">About us</button>
    </Link>

</ul>)
    }
}

export default NavMenu;

and here’s the Dealers component

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(
            
    <div>
        {console.log(this.props.location)}
        <div className="OriginalComponents">
        <SearchBarDealers onSearch={this.props.location.state.search}/>
        <div className="MainContainer">
            <div className="SDResults">
        <SearchDealersResults data={this.props.location.state.searchResults} getId={this.props.location.getId}/>
        </div>
        <div className="DDList">
        <DealerDetailsList show={this.props.location.state.show}/>
        </div>
        </div> 
        </div>
    </div>
    
        );
    }
}

export default Dealers;

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:

{pathname: "/Dealers", search: "", hash: "", state: undefined}
hash: ""
pathname: "/Dealers"
search: ""
state: undefined

So this means the states have not been recorded properly in the previous step :frowning:
The console.log in my NavMenu for this.props.dealers returns the expected value, so this means when I declare:

<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,
    }}}>
    {console.log(this.props.dealers)}
    <button className="dealr button" onClick={<Dealers/>}>Dealers</button>
    </Link>

each value of the state should be assigned a proper value. But somehow, it seems like it’s not working as expected…

Could someone give me a hand with this? ^^;
What am I doing wrong here?