I'm coding an app in React, using MD Bootstrap React. I'm having an issue getting the value from the Input component.

CreateLesson.js

import { Input, Button } from 'mdbreact';

class CreateLesson extends Component {
constructor (props) {
    super(props)

    this.state = {
        title: '',
        card1: ''
    }
}

handleTitle = (event) => {
    this.setState({
        title: event.target.value
    })
}

handleInput = (event) => {
    this.setState({
        [event.target.id]: event.target.value
    })
}

render () {
    return (
        <div>
            <h2>Create New Lesson</h2>
            <div className="row">
                <div className="col-md-6">
                    <div className="card create-lesson-card">
                    <span className="card-title">Flash Cards</span>
                        <Input label="Lesson Title"  onInput={this.handleTitle} />
                        <Input id="card1" label="Card One" value={this.state.card1} onInput={this.handleInput} />
                    </div>
                </div>
            </div>
        </div>
    )
    }
}

export default CreateLesson;

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.

However, when I type in either input field, I get an error: Uncaught TypeError: Cannot read property 'toString' of undefined

What am I doing wrong?