ReactJS/ React-Router: How to filter nested array and objects based on url path parameters?

Question

I have the following set up:

Navigating to StudentsBoard:

  <Link to={`/StudentsBoard/Kev/monday/blue`}></Link>

How route is set up:

  <Route
    component={StudentsBoard}
    path='/StudentsBoard/:name/:day/:color'
  />

And on the StudentsBoard page:

const mapStateToProps = (state, ownProps) => {
  let student = state.students.filter(student => student.name == ownProps.params.name)

  let day = ownProps.params.day
  let color = ownProps.params.color

  return {
    carFiles: student[0].day.color //Getting an error here saying day and color are - Uncaught TypeError: Cannot read property 'day'/'color' of undefined
  }
}

But for let day and let color I'm getting an error: Uncaught TypeError: Cannot read property 'day'/'color' of undefined

How can I make the passed in params, day and color as references to the property in student[0]? Or is there a better way to filter an object based on parameters passed in via ownProps.params? Would like to ultimately get down to the color object.

Thank you and will be sure to vote up and accept answer

EDIT

Data structure:

students: [
  {
    name: Kev
    monday: {
      blue: {
        room: 5
      },
      pink: {
        root: 6
      }
    },
    tuesday: {
      green: {
        room: 7
      },
      purple: {
        root: 8
      }
    },
  },
  {
    name: Jerome
    monday: {
      black: {
        room: 5
      },
      orange: {
        root: 6
      }
    },
    tuesday: {
      yellow: {
        room: 7
      },
      purple: {
        root: 8
      }
    },
  },
]

Answer 1

As stated in a comment, you'll need to use

students[0][day][color]

What you did, was trying to access an object which would have to look like this:

var students = [{
    day: {
        color: {}
    }
}]

Let me explain with an example:

student.monday

is the same as

student['monday']

Of course, the .monday version is more convenient, but when using ['monday'], it gives you the ability to swap 'monday' with the variable day, which represents a string, e.g. 'monday'.

var propertyName = 'monday';
student[propertyName];

You should generally use the .monday variant, whenever possible, and only use the brackets, if you have to (like in your case).

And you should also add some sort of error handling, if a property on your data structure does not exist. Since you are dealing with strings from a URL - which a user can alter - your code may break.

// check if day and color properties are available
// for that student
if(!students[0][day] || !students[0][day][color]) {
    // either day or color does not exist on student
    return { carFiles: null };
}
// All good, proceed as normal

Please note, that your component then would need to handle the case, where this.props.carFiles is null.

Answer 2

. and [' '] is an equivalence. But I don't understand why you used 'day' and 'color' here? There are no such fields in your data structure. Can you print them out in your console.log to view the day and color at first place before your parse them out from object?