title: How to pass props around with React Router
body: <p>I have this class here call <em>UtilityCard</em>:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import &quot;./UtilityCard.css&quot;;
  
  export class UtilityCard extends Component {
    render() {
      
      const {
        map,
        type,
        start_location,
        land_location,
        movement,
        img,
        video,
        description,
        id,
      } = this.props;
      const UtilityURL = &quot;/utility/&quot; + id;
      return (
        &lt;Link
          className=&quot;UtilityCard-link&quot;
          to={{
            pathname: UtilityURL,
            state: {
              map: map,
              type: type,
              start_location: start_location,
              land_location: land_location,
              movement: movement,
              img: img,
              video: video,
              description: description,
              id: id,
            },
          }}
        &gt;
          &lt;div className=&quot;UtilityCard&quot;&gt;
            &lt;img className=&quot;UtilityCard-image&quot; src={img} alt={id} /&gt;
            &lt;h1 className=&quot;UtilityCard-info&quot;&gt;
              {land_location} {type} from {start_location}
            &lt;/h1&gt;
          &lt;/div&gt;
        &lt;/Link&gt;
      );
    }
  }
  
  export default UtilityCard;
  </code></pre>
  <p>The class below is called <em>UtilityPage</em>. I would like to take the props from a selected <em>UtilityCard</em> and display it on my <em>UtilityPage</em> in order to show more detail about the selected <em>UtilityCard</em>.</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import Container from &quot;@material-ui/core/Container&quot;;
  import &quot;./UtilityPage.css&quot;;
  
  export class UtilityPage extends Component {
    
    componentDidMount() {
      const { handle } = this.props.match.params;
      const {
        map,
        type,
        start_location,
        land_location,
        movement,
        img,
        video,
        description,
        id,
      } = this.props.location.state;
      
    }
  
    render() {
      return (
        &lt;Container maxWidth=&quot;lg&quot;&gt;
          &lt;div className=&quot;UtilityPage&quot;&gt;
            &lt;h1&gt;This is the UTILITYPAGE&lt;/h1&gt;
            &lt;div className=&quot;UtilityPage-content&quot;&gt;
              &lt;p&gt;This utility page is for {this.props.location.state.map}&lt;/p&gt;
              &lt;p&gt;
                The {this.props.location.state.type} is thrown from{&quot; &quot;}
                {this.props.location.state.start_location} and lands at{&quot; &quot;}
                {this.props.location.state.land_location}
              &lt;/p&gt;
              &lt;p&gt;
                This {this.props.location.state.type} requires a{&quot; &quot;}
                {this.props.location.state.movement}
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;img src={this.props.location.state.img} alt={this.props.location.state.id} className=&quot;UtilityPageImg&quot; /&gt;
            &lt;h1 className=&quot;UtilityPage-description&quot;&gt;
              DESCRIPTION: {this.props.location.state.description}
            &lt;/h1&gt;
          &lt;/div&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  export default UtilityPage;
  </code></pre>
  <p>I am getting the following error when clicking on a <em>UtilityCard</em>:</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read properties of undefined (reading
  'state')</p>
  </blockquote>
  <p>Not sure if this will help but I am seeding the <em>UtilityCards</em> from this class here, it takes information from a json file and maps out the data depending on the url that the user is currently at. Ideally I ONLY want the data from a specific card that the user selects from the list and passes those specific props onto the <em>UtiltiyPage</em> instead of having to pass ALL the data from the <em>UtiltiyList</em></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import UtilityCard from &quot;./UtilityCard&quot;;
  import Container from &quot;@material-ui/core/Container&quot;;
  import seedUtilityDust2 from &quot;./seedData/seedUtilityDust2&quot;;
  import seedUtilityVertigo from &quot;./seedData/seedUtilityVertigo&quot;;
  
  export class UtilityList extends Component {
    constructor(props) {
      super(props);
      this.state = { CurrentMap: this.findMap() };
      this.findMap = this.findMap.bind(this);
      this.seedUtility = this.seedUtility.bind(this);
    }
    findMap() {
      var URL = window.location.href;
      var URLpos = URL.search(&quot;de&quot;);
      var URLid = URL.substr(URLpos);
      return URLid;
    }
    seedUtility(id) {
      switch (id) {
        case &quot;de_dust2&quot;:
          return seedUtilityDust2.map((utility) =&gt; {
            return &lt;UtilityCard {...utility} key={utility.id} /&gt;;
          });
        case &quot;de_vertigo&quot;:
          return seedUtilityVertigo.map((utility) =&gt; {
            return &lt;UtilityCard {...utility} key={utility.id} /&gt;;
          });
        default:
          return &lt;h1&gt;THIS MAP DOESNT EXIST&lt;/h1&gt;;
      }
    }
  
    render() {
      console.log(&quot;state is: &quot;, this.state.CurrentMap);
      return (
        &lt;div&gt;
          &lt;Container maxWidth=&quot;lg&quot;&gt;
            &lt;div className=&quot;container&quot;&gt;
              {this.seedUtility(this.state.CurrentMap)}
            &lt;/div&gt;
          &lt;/Container&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default UtilityList;
  </code></pre>
  <p>I am still very new to React and after looking online for react router tutorials on how to pass props I cant seem to figure it out. As I mentioned before I only want the props from a selected <em>UtilityCard</em> and have those props passes into my <em>UtilityPage</em> to show those props in more detail. Any help would be extremely appreciated. If there is any additional information I can provide please let me know.</p>