Shawn Sheehan Shawn Sheehan -3 years ago 81
React JSX Question

onChange In SelectField Component For Material-UI / React is not accepting onChange from parent Component

So my workplace is using a SelectField inside of a component which is used in multiple places. Makes sense. Now When I use that component inside the current one I am working on. The onChange event which I have created does not pass the values needed to complete properly. Now if I change the SelectField to onChange={onChange} it works fine. However, it cannot be set this way as it other parts inside app are dependent on it. I am new to React. Here is my function

addHistory = (field) => (event, index, value, target) => {
const { history } = this.state;
console.log(this.state.history);
console.log(field);
if (field === 'employerName' || field === 'description') {
history[field] = event.target.value;
} else if (field === 'roles') {
history[field] = value;
} else {
history[field] = event.value;
}
this.setState({
history: this.state.history,
});
}


Here is the CompanySelectField I am importing and using with component

<CompanySelectField
label={translations.translate('driverProperties', 'typeOfVehicle')}
hint={translations.translate('driverProfile', 'pleaseSelectRole')}
style={{ marginTop: '25px' }}
name={'roles'}
value={this.state.history.roles}
onChange={this.addHistory('roles')}
fullWidth
required
>


Here is the CompanySelectField itself

<SelectField
name={name}
maxHeight={300}
value={value}
onChange={(event, index, response) => onChange(response)}
disabled={disabled}
hintText={hint}
>


Thank you ahead of time.

Answer Source

The method which you are returning from addHistory is having 4 arguments i.e. event, index, value, target whereas the one you are calling from SelectField component i.e. onChange={(event, index, response) => onChange(response)} it is having only one argument and that too response which does not match with first argument of the above mentioned returned method.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download