React JS trying to map collection, value is not defined

Question

I have the following collection in state:

getInitialState: function() {
    return {
        studentId: 666,
        activeTabId: 1,
        sections: [
        {name: 'were', value: 1, label: 'Basic Details'},
        {name: 'ty', value: 2, label: 'Agents Info' },
        {name: 'rty', value: 3, label: 'Case Notes'},
        {name: 'rtytr', value: 4, label: 'Registration'},
        {name: 'rty', value: 5, label: 'Contact Details'},
        {name: 'EditStudentAttendance', value: 6, label: 'Attendance'},
        {name: 'EditStudentSENDetails', value: 7, label: 'SEN Details'},
        {name: 'ewrwer', value: 8, label: 'SEN Reviews'},
        {name: 'sdfsd', value: 9, label: 'Assessments'},
        {name: 'sdf', value: 10, label: 'Behaviour'},
        {name: 'sdfsoood', value: 11, label: 'Detention'},
        {name: 'ooo', value: 12, label: 'Achievements'},
        {name: 'sdfdsfsdf', value: 13, label: 'Exclusions'},
        {name: 'yuui', value: 14, label: 'School History'},
        {name: 'uyiu', value: 15, label: 'Documents'}
    ]
    }
},

I'm trying to map in the render:

   {this.state.sections.map(function(section) {
                return (<Tab key={value} title={label}>
                    this.getElementByKey(name);
                </Tab>);
            })}

Keep getting the error:

Unhandled rejection ReferenceError: value is not defined

Any ideas?

Many thanks

Answer 1

value , label and name are properties of section object so you have to access it like this:

{this.state.sections.map(function(section) {
            return (<Tab key={section.value} title={section.label}>
                this.getElementByKey(section.name);
            </Tab>);
        })}

In your case you used variable which was never defined (therefore ReferenceError).