MDBInputGroup

Hey!

Any input should have a value and onChange handler.

EDIT

It seems like the onChange handler does not work as intended. I have just tested my solution and there is no event happening.

So I replaced onChange with onKeyUp to test it.

import React from "react";
import { MDBInputGroup } from "mdbreact";

class App extends React.Component {
  // Set initial states
    state = {
        username: "",
    }

    // Handle the onChange event
    handleChange = (e) => {
        // Set the state dynamically using the event param
        this.setState({[e.target.name]: e.target.value})
    }

    render() {
        console.log(this.state);
        return (
            <MDBInputGroup
            containerClassName="flex-nowrap mb-3"
            prepend="@"
            name="username"
            onKeyUp={this.handleChange}
            value={this.state.username}
            hint="Username"
            />
        );
    }
}

export default App;

Testing this I found out, that the event passed is not the input field and delivers no value. I think this is a #bug.

Because accordingly to the API documentation of https://mdbootstrap.com/docs/react/forms/input-group/ the MDBInputGroup should have a onChange event.

Old answer

I imagine a solution should be:

import React from "react";
import { MDBInputGroup } from "mdbreact";

class App extends React.Component {
  // Set initial states
  state = {
      username: "",
  }

  // Handle the onChange event
  handleChange = (e) => {
      // Set the state dynamically using the event param
      this.setState({[e.target.name]: e.target.value})
  }

  render() {
    return (
      <MDBInputGroup
      containerClassName="flex-nowrap mb-3"
      prepend="@"
      name="username"
      onChange={this.handleChange}
      value={this.state.username}
      hint="Username"
      />
    );
  }
}

export default App;

This handleChange function dynamically sets the state for each input you might want. Just set the name and value accordingly.

I haven't tested this, but this should work fine.