title: React passing a prop to components return undefined
body: <p>I'm really confused as to why when I route to <a href="http://localhost:3000/subjects/physics" rel="noreferrer">http://localhost:3000/subjects/physics</a> of my project. </p>
  
  <p>The variable gradeSelection is defined in App.js state. It is passed to subjectCards.js component via props as gradeSelection, which passes it onto a Subject.js component via props as gradeSelection. </p>
  
  <p>However, this.props.gradeSelection in Subjects.js returns undefined.</p>
  
  <p>Is there something I might possibly be doing wrong?</p>
  
  <p>Console output:</p>
  
  <pre><code>App.js: Year 12             // correct
  subjectCards.js: Year 12    // correct
  Subject.js: undefined       // not correct
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>constructor(props) {
    super(props);
    this.state = {
      gradeSelection: "Year 12"
    };
  }
  
  render() {
    console.log("App: "+this.state.gradeSelection)
    return (
      &lt;Route path="/subjects" render={(props)=&gt;(&lt;SubjectCards {...props}  gradeSelection={this.state.gradeSelection} /&gt;)} /&gt;
  );
  
  
  }
  </code></pre>
  
  <p>subjectCards.js</p>
  
  <pre><code>let display;
  
  console.log("subjectCards.js: "+props.gradeSelection)
  display = &lt;Route path="/subjects/:subjectName" render={(props)=&gt;&lt;Subject {...props} gradeSelection={props.gradeSelection}/&gt;} /&gt;
  
  
  return (
    display
  );
  </code></pre>
  
  <p>Subject.js</p>
  
  <pre><code>constructor(props) {
    super(props);
    console.log("Subject.js: "+this.props.gradeSelection);  // undefined
  }
  </code></pre>
  
  <p>Thank you!</p>
  
  <p>EDIT:</p>
  
  <p>When console.log(props) or console.log(this.props) in Subjects.js constructor. gradeSelection inside the console output is still undefined..</p>
  
  <p>I've tried passing a string to gradeSelection in subjectCards.js and the console output was correct in returning the string in Subject.js..</p>
  
  <pre><code>display = &lt;Route path="/subjects/:subjectName" render={(props)=&gt;&lt;Subject {...props} gradeSelection={"props.gradeSelection"}/&gt;} /&gt;
  </code></pre>