React JS OnBlur Error

Question

I have the following script :

class GlobalSearch extends Component {
    search_blur(){
        console.log("inside_blur_function");
    }
    render(){
        return(
            <div className="search-container">
                <input type="search" onBlur="{this.search_blur}"/>
            </div>
        );
    }
}

But, when I run the script, it returns the following error :

Uncaught Error: Expected onBlur listener to be a function, instead got type string

I had googled around to find the solutions for a couple hours, but couldn't find any correct solutions. Any pointers?

Did you read the error? I suggest reading up a basic React tutorial for XML tag attributes and expressions in {}... — Andrew Li, Jan 25 '17 at 05:12
Dude, I did know how to read the error, but didn't know what the correct solution was, just because you're good at ReactJS you don't have to be that arrogant. Even an expert could have made a slight mistake. — Budianto IP, Jan 25 '17 at 05:29
Not trying to be arrogant, I'm trying to tell you to do research before asking here. — Andrew Li, Jan 25 '17 at 05:30

Shubham Khatri · Accepted Answer · 2017-01-25T05:11:13.970

1

The error is self explanatory, onBlur expects a function as an argument and you are provinding a string. You need remove quotes around the function defined for onBlur

<input type="search" onBlur={this.search_blur}/>

edited Jan 25 '17 at 05:11

answered Jan 25 '17 at 05:09

Shubham Khatri

270,417
55
406
400

Wow, can't believe it, the solution is so simple, I just need to remove the double quotes, thanks man, you saved my day :) – Budianto IP Jan 25 '17 at 05:11
I need about 10 minutes before I can accept your solution, it's stackoverflow rule. I will accept the solution later. – Budianto IP Jan 25 '17 at 05:12
No Problem, Glad to have helped :) You may probably need to bind the function as well later, if you make use of state inside it – Shubham Khatri Jan 25 '17 at 05:21
You can refer to the follwing solution on SO http://stackoverflow.com/questions/41688366/react-what-is-this-arrow-function-doing-in-the-props-for-tic-tac-toe-game/41688664#41688664 – Shubham Khatri Jan 25 '17 at 05:28
Thanks for the tips, it's quite frustating when you have to solve something, but the deadline is so close enough. Some people are helpful enough to make the others frustated, but you're the opposite, many thanks. – Budianto IP Jan 25 '17 at 05:34

React JS OnBlur Error

1 Answers1