React MD Bootstrap: How To Get Input Value

Question

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?

Edit: Adding stack trace for errors. All three errors below appear every time.

// 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 <TextField> 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)

Rotarepmi · Answer 1 · 2019-01-07T11:21:22.047

2

there is a method named getValue (which returns input's value on change). Check out the documentation -> API section.

edited Jan 07 '19 at 11:21

answered Jan 07 '19 at 11:11

Rotarepmi

106
1
6

score 1 · Answer 2 · answered Feb 24 '18 at 20:20

1

I don't think there is onInput prop in MD Bootstrap React, try to use onChange.

answered Feb 24 '18 at 20:20

jCobb

238
1
9

Hi, thanks for the response! Unfortunately, that didn't solve the issue. `` `` Using `onChange` still gives me the same error message `Cannot read property 'toString' of undefined` – John P Feb 24 '18 at 21:11
Please show us also stack trace, on which line it's broken (maybe it's external library), also you don't have value defined in title input but that shouldn't be problem :/ – jCobb Feb 24 '18 at 22:19
Thanks - I added the full stack trace into the original post. – John P Feb 25 '18 at 00:47
Hi, you can see https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design/blob/master/src/components/TextField.js at line 104 there is the error, obviously innerValue is not defined, please try to set value property to you title input. – jCobb Feb 25 '18 at 10:58
Yep, you're right. I ended up taking out the `.toString()` method on line 104 and now everything appears to be working correctly. Thanks! – John P Feb 26 '18 at 11:42

React MD Bootstrap: How To Get Input Value

2 Answers2