Can't pass a props to child component inside an iteration - reactjs

Question

i got a problem when i try to pass a props to child component inside map iteration in my parent component. it always show a message notify that
TypeError: Cannot read property 'props' of undefined
can someone help me figure out what wrong in my code? i already try to pass it through a local state too, then still got an error.
here is my code :
My Parent Component
import React from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';
import classnames from 'classnames';
import PeriodicSetup from './PeriodicSetup';
import PeriodicDataTable from './PeriodicDataTable';
import {connect} from 'react-redux';
import store from '../../store/store';
class SetupPage extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
activeTab: 0,
};
}
toggle(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
});
}
}
render() {
return (
<div>
<Nav tabs>
{this.props.SetupTabTitles.map((data, i)=>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === i})} onClick={() => {this.toggle(i); }}>
{data.tabTitle}
</NavLink>
</NavItem>
)}
</Nav>
<TabContent activeTab={this.state.activeTab}>
{this.props.SetupTabTitles.map(function(data, i) {
if(data.tabTitle == 'Tasks'){
return (
<TabPane tabId={i}>
test
</TabPane>
)
}else if(data.tabTitle == 'Periodic'){
return (
<TabPane tabId={i}>
<PeriodicSetup />
<PeriodicDataTable periodicData = {this.props.periodicList}/>
</TabPane>
)
}
})}
</TabContent>
</div>
);
}
}
function mapStateToProps(state){
return {
SetupTabTitles : state.component.SetupTabTitles,
periodicList : state.setup.periodicList
};
}
export default connect(mapStateToProps)(SetupPage);
My Child Component :
import React from 'react';
const {Table, Column, Cell} = require('fixed-data-table');
export default class PeriodicDataTable extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
test
</div>
)
}
}
The Condition in my code,
this.props.periodicList
already have an array value, and everything is working well if i commend out my
<PeriodicDataTable periodicData = {this.props.periodicList}/>
or i move it out from the iteration, it works. but i still don't know why it got an error if i put it inside an iteration.

Answer 1

You need pass your map callback function with explicit passing to this that refer to the React component, not the callback function that has no property called props, to be like this:
{this.props.SetupTabTitles.map(this.renderTabTitles.bind(this))}
then add a method in your class as follow:
renderTabTitles(data, i) {
if(data.tabTitle == 'Tasks') {
return (
<TabPane tabId={i}>
test
</TabPane>
)
} else if(data.tabTitle == 'Periodic') {
return (
<TabPane tabId={i}>
<PeriodicSetup />
<PeriodicDataTable periodicData = {this.props.periodicList}/>
</TabPane>
)
}
}