Cannot pass props to Router in react-router-dom

Question

I have some trouble trying to pass props to a component via a Router using react-router-dom.

After some search I know I have to use the render method with an inline function but with the following code, I have an error (Cannot read property 'map' of undefined). I tried multiple things but I didn't manage to make it work. The only thing which is working is when I put a direct value (like 100 or 'test').

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const CharactersSelection = props => {
  return (
    <div>
      <div className="row">
        {props.availableCharacters.map((number, i) => <span>{i}</span>)}
      </div>
    </div>
  );
};

const Content = props => {
  return (
     <Router>
      <div className="content row">
        <div className="menu col-3">
          <div>
            <Link to="/" class="bm-item">
              <i class="fas fa-fw fa-home" />
              <span>Accueil</span>
            </Link>
            <Link to="/charactersSelection" class="bm-item">
              <i class="fas fa-fw fa-play-circle" />
              <span>Nouvelle Partie</span>
            </Link>
          </div>
        </div>
        <div className="contentGame col-9">
          <div>
            <Route exact path="/" component={Home} />
            <Route path="/charactersSelection" render={props => (<CharactersSelection {...props}
              availableCharacters={props.availableCharacters}/>)}/>
          </div>
        </div>
      </div>
    </Router>
   );
};

class App extends React.Component {
  static availableCharacters = () => [
    { imgName: "base_loup.png", name: "Loup Garou", maxInGame: 4 },
    { imgName: "base_simple_villageois.png",name: "Simple Villageois",maxInGame: 10},
    { imgName: "base_chasseur.png", name: "Chasseur", maxInGame: 1 },
    { imgName: "base_petite_fille.png", name: "Petite Fille", maxInGame: 1 },
    { imgName: "base_sorciere.png", name: "Sorcière", maxInGame: 1 },
    { imgName: "base_cupidon.png", name: "Cupidon", maxInGame: 1 },
    { imgName: "base_voleur.png", name: "Voleur", maxInGame: 1 },
    { imgName: "base_voyante.png", name: "Voyante", maxInGame: 1 }
  ];

  render() {
    return (
      <div>
        <Content availableCharacters={this.availableCharacters} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

A little help will be appreciated, thanks.

Answer 1

Did you try to rename the props arg of your render route to see if there is a naming conflict with const Content = props => {

<Route path="/charactersSelection" render={p => (<CharactersSelection {...props} />)}/>

And actually, i don't think you need the arg props neither :

<Route path="/charactersSelection" render={() => (<CharactersSelection {...props} />)}/>

should work

Answer 2

remove static from array data, and no need to put in function, see example: https://codesandbox.io/s/mzz54j08

 import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; const CharactersSelection = props => { return ( <div> <div className="row"> {props.availableCharacters.map((number, i) => <span>{i}</span>)} </div> </div> ); }; const Content = props => { return ( <Router> <div className="content row"> {console.log(props.availableCharacters)} <div className="menu col-3"> <div> <Link to="/" class="bm-item"> <i class="fas fa-fw fa-home" /> <span>Accueil</span> </Link> <Link to="/charactersSelection" class="bm-item"> <i class="fas fa-fw fa-play-circle" /> <span>Nouvelle Partie</span> </Link> </div> </div> <div className="contentGame col-9"> <div> <Route path="/charactersSelection" component={() => <CharactersSelection {...props} availableCharacters={props.availableCharacters} />} /> </div> </div> </div> </Router> ); }; class App extends React.Component { availableCharacters = [ { imgName: "base_loup.png", name: "Loup Garou", maxInGame: 4 }, { imgName: "base_simple_villageois.png", name: "Simple Villageois", maxInGame: 10 }, { imgName: "base_chasseur.png", name: "Chasseur", maxInGame: 1 }, { imgName: "base_petite_fille.png", name: "Petite Fille", maxInGame: 1 }, { imgName: "base_sorciere.png", name: "Sorcière", maxInGame: 1 }, { imgName: "base_cupidon.png", name: "Cupidon", maxInGame: 1 }, { imgName: "base_voleur.png", name: "Voleur", maxInGame: 1 }, { imgName: "base_voyante.png", name: "Voyante", maxInGame: 1 } ]; render() { return ( <div> <Content availableCharacters={this.availableCharacters} /> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);