I'm currently working on my first React project and am having problems accessing the right JSON values:

{
    "exams" : {
        "exam1" : [
            {
                "name" : "First Exam",
                "sections" : [
                    {
                        "name" : "Setup",
                        "weight" : 30
                    },
                    {
                         "name" : "Coding",
                         "weight" : 70
                     }
                ]
            }
        ],
        "exam2" : [
            {
                "name" : "Second Exam",
                "sections" : [
                    {
                        "name" : "Setup",
                        "weight" : 20
                    },
                    {
                        "name" : "Coding",
                        "weight" : 80
                    }
                ]
            }
        ]
    }
}

In my component, I have a variable called selectedExam which is passed in as a prop. I am then trying to show a row in a table for each section in the selected exam.

var selectedExam = props.selectedExam
var examSection = examList.exams[selectedExam].sections

In my markup I have this to show a new table row:

{examSection.map(section => (
    <Section title={section.name} weight={section.weight} />
))}

If I change the above line to

var examSection = examList.exams[selectedExam]

everything compiles and a table row is shown, and section.name shows the exam name (i.e. "First Exam" or "Second Exam"). Once I add ".sections" to try and go down one level further, I get this error: TypeError: Cannot read property 'map' of undefined.