onChange event not firing for input field with React

Question

I am trying to render a simple input field, in which when the value is changed, a callback from the parent component will be called. My code is given below:

class Parent extends React.Component {
    myMethod() {
        alert("Test");
    }
    render() {
        return (
            <Child cb={this.myMethod} />
        );
    }
}

class Child extends React.Component {
    render() {
        return (
            <input type="text" placeholder="enter text" onChange="{this.props.cb}" />
        );
    }
}

Child.propTypes = {
    cb: React.PropTypes.func
}

ReactDOM.render(
    <Parent />,
    document.getElementById("container")
);

My HTML code is:

<div id="container">

</div>

The error I am getting is:

Warning: Failed prop type: Child: prop type `cb` is invalid; it must be a function, usually from React.PropTypes.
    in Child (created by Parent)
    in Parent

Warning: Failed form propType: Invalid prop `onChange` of type `string` supplied to `input`, expected `function`. Check the render method of `Child`.

I am new to React, and cannot really understand how else I should pass the callback to the Child component. Can someone help please?

goldbullet · Accepted Answer · 2016-08-25 20:46:17Z

3

Your onChange prop shouldn't be string:

class Child extends React.Component {
    render() {
        return (
            <input type="text" placeholder="enter text" onChange={this.props.cb} />
        );
    }
}

answered Aug 25, 2016 at 20:46

goldbullet

7024 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TimoStaudinger · Accepted Answer · 2016-08-25 20:45:44Z

2

Remove the quotation marks around the value of onChange:

<input type="text" placeholder="enter text" onChange={this.props.cb} />

answered Aug 25, 2016 at 20:45

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

1 Comment

user3033194 Over a year ago

Thanks a lot for the reply!

Collectives™ on Stack Overflow

onChange event not firing for input field with React

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related