MDBinput onChange to set a state

Topic: MDBinput onChange to set a state

panji gemilang free 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

Add comment

Jakub Chmura staff answered 5 years ago

1 0 Best answer

Hi <a href="/profile/?id=78571" target="_blank" rel="nofollow">@panji gemilang</a>,

If you use onChange event you need to do this: <code>onChange={this.onChange}</code> instead of: <code>onChange={e => this.onChange(e)}</code>

I made a little snippet to show you how to change state with MDBInput Component:

<pre class="prettyprint"><code>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;
</code></pre>

Best regards,

Kuba

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

panji gemilang

5Support score
1Questions 0Answers 0Snippets