title: React MD Bootstrap: How To Get Input Value
body: <p>I'm coding an app in React, using <a href="https://mdbootstrap.com/react/" rel="nofollow noreferrer">MD Bootstrap React</a>. I'm having an issue getting the value from the <a href="https://mdbootstrap.com/react/components/inputs/" rel="nofollow noreferrer">Input component</a>. </p>
  
  <p>CreateLesson.js</p>
  
  <pre><code>import { Input, Button } from 'mdbreact';
  
  class CreateLesson extends Component {
  constructor (props) {
      super(props)
  
      this.state = {
          title: '',
          card1: ''
      }
  }
  
  handleTitle = (event) =&gt; {
      this.setState({
          title: event.target.value
      })
  }
  
  handleInput = (event) =&gt; {
      this.setState({
          [event.target.id]: event.target.value
      })
  }
  
  render () {
      return (
          &lt;div&gt;
              &lt;h2&gt;Create New Lesson&lt;/h2&gt;
              &lt;div className="row"&gt;
                  &lt;div className="col-md-6"&gt;
                      &lt;div className="card create-lesson-card"&gt;
                      &lt;span className="card-title"&gt;Flash Cards&lt;/span&gt;
                          &lt;Input label="Lesson Title"  onInput={this.handleTitle} /&gt;
                          &lt;Input id="card1" label="Card One" value={this.state.card1} onInput={this.handleInput} /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
      }
  }
  
  export default CreateLesson;
  </code></pre>
  
  <p>In both inputs, I'm simply trying to get the input from the user and set the state appropriately. handleInput is designed to be dynamic because I'm going to have several inputs on the page eventually.</p>
  
  <p>However, when I type in either input field, I get an error:
  <code>Uncaught TypeError: Cannot read property 'toString' of undefined</code></p>
  
  <p>What am I doing wrong?</p>
  
  <p>Edit: Adding stack trace for errors. All three errors below appear every time.</p>
  
  <pre><code>// Error One
  Uncaught TypeError: Cannot read property 'toString' of undefined
  at TextField.render (mdbreact.js:2148)
  at finishClassComponent (react-dom.development.js:7873)
  at updateClassComponent (react-dom.development.js:7850)
  at beginWork (react-dom.development.js:8225)
  at performUnitOfWork (react-dom.development.js:10224)
  at workLoop (react-dom.development.js:10288)
  at HTMLUnknownElement.callCallback (react-dom.development.js:542)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
  at invokeGuardedCallback (react-dom.development.js:438)
  at renderRoot (react-dom.development.js:10366)
  at performWorkOnRoot (react-dom.development.js:11014)
  at performWork (react-dom.development.js:10967)
  at batchedUpdates (react-dom.development.js:11086)
  at batchedUpdates (react-dom.development.js:2330)
  at dispatchEvent (react-dom.development.js:3421)
  
  // Error Two
  The above error occurred in the &lt;TextField&gt; component:
  in TextField (created by Input)
  in Input (at CreateLesson.js:75)
  in div (at CreateLesson.js:69)
  in div (at CreateLesson.js:68)
  in div (at CreateLesson.js:67)
  in div (at CreateLesson.js:64)
  in CreateLesson (created by Route)
  in Route (at index.js:20)
  in div (at index.js:18)
  in Router (created by BrowserRouter)
  in BrowserRouter (at index.js:17)
  
  Consider adding an error boundary to your tree to customize error handling behavior.
  Visit https://redacted to learn more about error boundaries.
  
  // Error Three
  Uncaught TypeError: Cannot read property 'toString' of undefined
  at TextField.render (mdbreact.js:2148)
  at finishClassComponent (react-dom.development.js:7873)
  at updateClassComponent (react-dom.development.js:7850)
  at beginWork (react-dom.development.js:8225)
  at performUnitOfWork (react-dom.development.js:10224)
  at workLoop (react-dom.development.js:10288)
  at HTMLUnknownElement.callCallback (react-dom.development.js:542)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
  at invokeGuardedCallback (react-dom.development.js:438)
  at renderRoot (react-dom.development.js:10366)
  at performWorkOnRoot (react-dom.development.js:11014)
  at performWork (react-dom.development.js:10967)
  at batchedUpdates (react-dom.development.js:11086)
  at batchedUpdates (react-dom.development.js:2330)
  at dispatchEvent (react-dom.development.js:3421)
  </code></pre>