MDBinput onChange to set a state


Topic: MDBinput onChange to set a state

panji gemilang asked 5 years ago

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


Jakub Chmura staff premium answered 5 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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