React - get value from target

Question

I'd like to get the value from input but I still gets 'Cannot read property 'target' of undefined' and I have no idea why it doesn't work. If someone could explain I'd be thankful

import React from "react";

class Search extends React.Component {
    constructor(display) {
        super(display);
        this.state = {
            searchingText: ""
        };
    }

    handleChange(event) {
        let searchingText = event.target.value;
        this.setState({
            searchingText: searchingText
        });
        if (searchingText.length > 2) {
            this.props.onSearch(searchingText);
        }
    }

    handleKeyUp(event) {
        if (event.keyCode === 13) {
            this.props.onSearch(this.state.searchingText);
        }
    }

    render() {
        const styles = {
            fontSize: "1.5em",
            width: "90%",
            maxWidth: "350px"
        };
        return (
            <input
                type="text"
                onKeyUp={this.handleKeyUp}
                onChange={() => this.handleChange()}
                placeholder="Tutaj wpisz fraze"
                style={styles}
                value={this.state.searchTerm}
            />
        ); 
    }    
}

export default Search;re

Hey man. You look new here. Tags have usage summaries that fold out as you type them. I retagged your question so it doens't get blown away. You still need to improve the readability of your question. — Joshua, Sep 04 '18 at 22:41

bozdoz · Accepted Answer · 2018-09-04T20:49:49.300

You're going to want to change onChange={() => this.handleChange()} to:

onChange={this.handleChange}

First reason being you're not passing an argument to this.handleChange, which should be event.

Further, you will want to adjust your handle functions like this, to keep the context of this:

From:

handleChange(event) {

To:

handleChange = (event) => {

Reason being: an arrow function does not have its own this, and in this case would refer to the class, and would be able to access the props.

score 0 · Answer 2 · answered Sep 04 '18 at 20:53

Quick but dirty fix:

onChange={e => this.handleChange(e)}

But, this is not necessary and not best practice:

You don't need to pass event object here.
Using arrow functions in JSX properties is bad since they will be recreated in every render of this JSX element.

So, you can use the function just by its reference:

onChange={this.handleChange}

With this usage, you will get the event object in your method. But, in order to use this context in this method, you have to bind it. You can do this by two ways:

In the constructor

constructor(props) {
    super(props);
    this.state = {
        searchingText: ""
    };
    this.handleChange = this.handleChange.bind( this );
}

Using an arrow function

You can define your method as a fat arrow one since they don't create their lexical scope:

handleChange = (event) => {
        let searchingText = event.target.value;
        this.setState({
            searchingText: searchingText
        });
        if (searchingText.length > 2) {
            this.props.onSearch(searchingText);
        }
}

React - get value from target

2 Answers2