score:6

Accepted answer

Without seeing the rest of your code, I'm going to assume that subjectCards.js is a functional component that looks like this. If it's not, could you please post the complete component?

function SubjectCards(props) {
  let display

  console.log('subjectCards.js: ' + props.gradeSelection)

  display = (
    <Route
      path="/subjects/:subjectName"
      render={props => (
        <Subject {...props} gradeSelection={props.gradeSelection} />
      )}
    />
  )

  return display
}

What I'm seeing wrong with this code in your particular use case is that on line 1, you have an argument with the name of props. If you follow the code down to line 9, you'll notice that the anonymous function call inside render also has a props argument. On line 10, you're calling props.gradeSelection which would look inside the argument found on line 9 and not the argument found on line 1, giving you undefined.

There are a couple different ways of fixing this. One way I'd recommend is destructuring your argument props on line 1.

function SubjectCards({ gradeSelection }) { // See how we went from props to {gradeSelection}
  let display

  console.log('subjectCards.js: ' + gradeSelection)

  display = (
    <Route
      path="/subjects/:subjectName"
      render={props => <Subject {...props} gradeSelection={gradeSelection} />}
    />
  )

  return display
}

You can see an example of this over at https://mo9jook5y.codesandbox.io/subjects/math

You can play around with the example here: https://codesandbox.io/s/mo9jook5y

score:0

As Randy Casburn said in the comments, your reference should be to props.gradeSelection and not this.props.gradeSelection.

Props is received as an input to your constructor function (i.e. constructor(props)), and therefore should be referenced as such. If you need to manipulate it before rendering or manage it locally you can pass that to the state for Subject within the constructor.

score:0

You may use like:

//subjectCards.js
render={({gradeSelection, ...other}) => <Subject {...other} 
      gradeSelection={gradeSelection}/>}

//Subject.js
console.log(props.gradeSelection)

But wait, you can just simply pass the props, it has all you need (including gradeSelection):

//subjectCards.js
render={(props) => <Subject {...props} />}

//Subject.js
console.log(props.gradeSelection)

Related Query

More Query from same tag