reset On Resolve the course to loop in React - reactjs

Question

I'm trying to reset the Values on change of the Dependency value to the SelectInput. But it course to loop and break the page. Here find the code I have done so far.
How can omit this on my code.
import {
SelectInput,
required
} from 'react-admin';
import data from '../data';
import { withStyles } from '#material-ui/core/styles';
import React, { Component } from 'react';
import { DependentInput } from 'aor-dependent-input';
const initialState = {
way_of_join: data.way_of_join
};
class WayOfJoinSelectInput extends Component {
constructor(props) {
super(props)
this.state = initialState;
}
reset(){
this.setState({initialState});
}
switchSector = (props) => {
if (props !== undefined && Object.keys(props).length > 0) {
var value = props.General_Service.service_sector;
this.reset();
switch (value) {
case 'sleas':
this.state.way_of_join.splice(4, 3)
break;
case 'sltes':
this.state.way_of_join.splice(2, 1)
break;
}
}
};
render() {
return (
<DependentInput resolve={this.switchSector}>
<SelectInput
source="General_Service.way_join"
label="Way of Join"
validate={required()}
// onChange={this.reset()}
choices={this.state.way_of_join}
/>
</DependentInput>
)
}
}
export default withStyles(styles)(WayOfJoinSelectInput);
Here find what getting on error.

Answer 1

import {
SelectInput,
required
} from 'react-admin';
import data from '../data';
import { withStyles } from '#material-ui/core/styles';
import React, { Component } from 'react';
import { DependentInput } from 'aor-dependent-input';
const initialState = {
way_of_join: data.way_of_join
};
class WayOfJoinSelectInput extends Component {
constructor(props) {
super(props)
this.state = initialState;
this.reset=this.reset.bind(this);
}
reset(){
this.setState({initialState});
}
switchSector = (props) => {
if (props !== undefined && Object.keys(props).length > 0) {
var value = props.General_Service.service_sector;
this.reset();
switch (value) {
case 'sleas':
this.state.way_of_join.splice(4, 3)
break;
case 'sltes':
this.state.way_of_join.splice(2, 1)
break;
}
}
};
render() {
return (
<DependentInput resolve={this.switchSector}>
<SelectInput
source="General_Service.way_join"
label="Way of Join"
validate={required()}
onChange={this.reset}
choices={this.state.way_of_join}
/>
</DependentInput>
)
}
}
export default withStyles(styles)(WayOfJoinSelectInput);
You need to bind the functions in constructor or use arrow functions.