Topic: Getting Value from Text Input

john-p free asked 4 years ago


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?


Jakub Strebeyko staff answered 4 years ago


Hi there John,

It makes no sense to apply toString() to innerValue, which already is a string. Thanks for reaching out and pointing that out! Consider the matter fixed.

With Best Regards,
Kuba


john-p free answered 4 years ago


I figured this out with some help from Stack Overflow. On line 104 of the Text Field component (https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design/blob/master/src/components/TextField.js), the .toString() method was causing the issue. I removed that, and now everything appears to be working correctly.

New line of code: var isNotEmpty = Boolean(this.state.innerValue) || hint || this.state.isTouched;

 

 



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags