Topic: MDBinput onChange to set a state
Expected behavior
I want to change a state on MDBinput. Usually, I use this method on pure JSX
onChange = e => {
this.setState({
[e.target.name]: e.target.value
})
}
.
.
.
<input
name="nim"
type="text"
id="form2"
onChange={e => this.onChange(e)}
value={this.state.nim}
className="form-control"
/>
*Actual behavior*But this gave me an error
<MDBInput
icon="envelope"
type="text"
name="nim"
label="Masukkan username"
group
onChange={e => this.onChange(e)}
validate
error="salah"
success="benar"
className="form-control"
value={this.state.nim}
/>
*Resources (screenshots, code snippets etc.)*Errors :
Typeerror : onChange is not a function
Full question : Stackoverflow
Hi @panji gemilang,
If you use onChange event you need to do this: onChange={this.onChange} instead of: onChange={e => this.onChange(e)}
I made a little snippet to show you how to change state with MDBInput Component:
import React, { Component } from 'react';
import { MDBInput } from 'mdbreact';
class InputExample extends Component {
state = {
inputValue: ''
};
changeStateInputValue = e => {
this.setState(
{
[e.target.name]: e.target.value
},
() => {
console.log(this.state.inputValue);
}
);
};
render() {
return (
<MDBInput
icon='envelope'
type='text'
name='inputValue'
label='Masukkan username'
group
onChange={this.changeStateInputValue}
validate
error='salah'
success='benar'
className='form-control'
value={this.state.inputValue}
/>
);
}
}
export default InputExample;
Best regards,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.1
- Device: Laptop
- Browser: Chrome
- OS: Windows 8.1
- Provided sample code: No
- Provided link: Yes