MDB Inputs seem to be read only when assiging a value to the

Hi,

If you want to get or set the input value you need to write a method that will be changing the state. When you set value or checked without methods this inputs will be read-only.

I wrote for You a simple snippet with a default input value to show you what I mean:

import React, { Component } from 'react';
import { MDBCol, MDBInput, MDBBtn, MDBCard, MDBCardBody } from 'mdbreact';

class SimpleSnippet extends Component {
  constructor() {
    super();
    this.state = {
      name: 'TestName',
      checkbox: false,
      message: 'Test text area'
    };
  }

  handleInput = e => {
    console.log(e.target.value);
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  handleCheckbox = e => {
    this.setState(
      {
        [e.target.name]: e.target.checked
      },
      () => {
        console.log(this.state.checkbox);
      }
    );
  };

  render() {
    return (
      <MDBCol md='4'>
        <MDBCard>
          <MDBCardBody>
            <form>
              <p className='h4 text-center py-4'>Sign up</p>
              <div className='grey-text'>
                <MDBInput
                  label='Your name'
                  group
                  type='text'
                  validate
                  error='wrong'
                  success='right'
                  name='name'
                  value={this.state.name}
                  onInput={this.handleInput}
                  required
                />
                <MDBInput
                  type='textarea'
                  rows='2'
                  label='Your message'
                  name='message'
                  value={this.state.message}
                  onInput={this.handleInput}
                  required
                />
                <MDBInput
                  containerClass='form-check checkbox-teal'
                  labelClass='form-check-label'
                  label='Confirm '
                  type='checkbox'
                  id='Confirm'
                  name='checkbox'
                  checked={this.state.checkbox}
                  onChange={this.handleCheckbox}
                  required
                />
              </div>
              <div className='text-center py-4 mt-3'>
                <MDBBtn color='cyan' type='submit'>
                  Send Message
                </MDBBtn>
              </div>
            </form>
          </MDBCardBody>
        </MDBCard>
      </MDBCol>
    );
  }
}

export default SimpleSnippet;

Best Regards, Kuba