React native infinite loop while pass the parameter into function - reactjs

Question

How to call function inside another function>
For example
I have 2 cascade dropdown which value from second dropdown depends on from first dropdown. inside the first dropdown there is a method like this
`onValueChange = {(value)=>{this.props.getSecondValue(value.id)}}.`
My question is why every time I change the value from first dropdown it causes infinite loop in this.props.getSecondValue() function?
How to solve that problem.
Many thanks !
update
here my snippet code
import React, {Component} from 'react';
import {StyleSheet, Text, View, TouchableOpacity, KeyboardAvoidingView, SafeAreaView, ScrollView} from 'react-native';
import {bindActionCreators} from "redux";
import {RootActions} from "../../shared/root-actions";
import connect from "react-redux/es/connect/connect";
import Config from 'react-native-config';
import _ from 'lodash';
import {Dropdown} from 'react-native-material-dropdown';
type Props = {};
const styles = StyleSheet.create({
container: {
flex: 1
}
});
class Index extends Component<Props> {
constructor(props) {
super(props);
this.state = {
point_type_id: '',
point_category_id: '',
}
this._getPointTypes = this._getPointTypes.bind(this);
this._getPointCategories = this._getPointCategories.bind(this);
}
componentDidMount() {
this._getPointTypes();
}
_getPointTypes(){
this.props.getPointTypes();
}
_getPointCategories(point_type_id){
this.props.getPointCategories(point_type_id);
}
render() {
let {
point_type_id,
point_category_id,
} = this.state;
let {
} = this.locationDetailStates;
return (
<View style={styles.container}>
....
<Dropdown
label='Point types'
data={point_types}
labelExtractor = {(value)=>{this._getPointCategories(value.id)}}
/>
<Dropdown
label='Point categories'
data={point_categories}
/>
</View>
);
}
}
function mapStateToProps(state) {
return {
outdoorStates: state.outdoorStates,
locationDetailStates:state.locationDetailStates
}
}
function mapDispatchToProp(dispatch) {
return bindActionCreators(RootActions, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProp)(Index);

Answer 1

Try to refactor like this:
function mapDispatchToProps(dispatch) {
return {
getSecondValue: (id)=>{
//Your code here
}
}
}
class MyClass extends React.Component {
handleChange = (e)=>{
//assign your id from event values
this.props.getSecondValue(id);
}
...
render(){
return (
//inside a tag
onChange = {this.handleChange}
)
}
}