Segment Controller with Table using api rest

I am using segment controller for different options ie consult my api and return data, from that data I need to obtain a specific serial of each data to consult in other web services and return other data to populate a table.

import React, {Component} from 'react';
import {StatusBar, View, Text, StyleSheet, ScrollView} from 'react-native';
import I18n from '../../i18n';
import ENV from '../../environment';
import styles from './styles';
import {Table, Row, Rows, Col, TableWrapper} from 'react-native-table- 
 component';
import SegmentControl from 'react-native-segment-controller';
import {fetchPeriods, fetchSubPeriods} from '../../actions/academ';
import {connect} from 'react-redux';


class StudentDetail extends Component {
constructor(props) {
    super(props);
    console.log(props);
    this.state = {
        index: 0,
        content: '',
        tableHead: [null, 'Parcial 1', 'Parcial 2', 'Parcial 3', 'Examen'],
        tableTitle: ['Matemàtica', 'Ciencias Naturales', 'Física', 
    'Química'],
        tableData: [
            ['10', '10', '10', '10'],
            ['10', null, '10', '10'],
            ['10', '10', '10', '10'],
            ['10', '10', '10', '10']
        ],
        // selectedTab: 'Quimestre I'

    }
    this.handlePress = this.handlePress.bind(this);
    this.handleSubPeriodPress = this.handleSubPeriodPress.bind(this);

}

componentDidMount() {
    console.log(this.props.navigation.state.params);
    const {serial_std} = this.props.navigation.state.params;
    console.log(serial_std);

    this.props.fetchPeriods(this.props.token, serial_std);
    this.props.fetchSubPeriods(this.props.token, 29);
}

componentWillUpdate(nextProps, nextState) {
    const {serial_std} = this.props.navigation.state.params;
    const {serial_std: serial_std_next} = nextProps.navigation.state.params;

    if (serial_std !== serial_std_next) {
        this.props.fetchPeriods(this.props.token, serial_std_next)
        this.props.fetchSubPeriods(this.props.token, 29);
        console.log(serial_std);
    }
    console.log('no cambio de estado');
}


static navigationOptions = {
    title: I18n.t('student_detail_title')
};

handlePress(val) {
    //console.log(index);
    // this.setState({content: 'Segment ${index + 1} selected !!!', index});

    this.setState({
        selectedTab: val
    })
}

handleSubPeriodPress() {
    this.props.fetchSubPeriods(this.props.token, 29);
}


render() {
    // const state = this.state;
    const prd = this.props.periods;

    return (
        <View style={stylesd.container}>
            <StatusBar barStyle={ENV.HEADER_STATUSBAR_STYLE}/>
            <ScrollView>
                  <SegmentControl
                    //values={['Quimestre I', 'Quimestre II', 'Promedio anual']}
                    values={ prd && prd.map(item =>item.name_prd)}
                    selectedIndex={this.state.selectedTab}
                    height={30}
                    borderRadius={3}
                    tabBadgeContainerStyle={{backgroundColor: 'red'}}
                    onTabPress={
                        this.handleSubPeriodPress}
                />
                {this.renderTableView()}
            </ScrollView>
        </View>
    );
}

renderTableView() {

    if (this.state.selectedTab === 0) {
        const subprd=this.props.periods;
        return (
            <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
                <Row data={subprd && subprd.map(item =>item.name_sbp)} style={stylesd.head} flexArr={[1, 1, 1, 1, 1]}
                     textStyle={stylesd.text}/>
                {/*<TableWrapper style={stylesd.wrapper}>*/}
                {/*<Col data={state.tableTitle} style={stylesd.title} heightArr={[28, 28]}*/}
                {/*textStyle={stylesd.text}/>*/}
                {/*<Rows data={state.tableData} flexArr={[1, 1, 1, 1]} style={stylesd.row}*/}
                {/*textStyle={stylesd.text}/>*/}
                {/*</TableWrapper>*/}
            </Table>
        )
    } else if (this.state.selectedTab === 1) {
        return (

            this.renderSecondTableView()

        )
    }
}

 const stylesd = StyleSheet.create({
container: {flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff'},
head: {height: 40, backgroundColor: '#f1f8ff'},
wrapper: {flexDirection: 'row'},
title: {flex: 1, backgroundColor: '#f6f8fa'},
row: {height: 28},
text: {textAlign: 'center'},

container2: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
    backgroundColor: '#F5FCFF',
},
title2: {
    fontSize: 20,
    fontWeight: '700',
    alignSelf: 'center',
    marginTop: -200,
    marginBottom: 60
},
info: {
    fontSize: 14,
    fontWeight: '500',
    color: 'grey',
    padding: 5
},
tab: {
    padding: 30,
    alignSelf: 'center'
}


  });

 export default connect(
 (state) => ({
    token: state.user.token,
    periods: state.academ.currentPeriods,
    subPeriods: state.academ.currentSubPeriods

}),
{fetchPeriods, fetchSubPeriods}
)(StudentDetail);

I do not know how to get the parameter I need with {prd && prd.map(item =>item.name_prd}

I need to send item.serial_prd but I do not know how to get it and send it for this.props.fetchSubPeriods(this.props.token, 29); which is why I send it burned and apart it draws me in the same segment controller, use redux.