ReactJS: Can not type into input field

Question

I am starting to learn react and download and follow any tutorials in internet. I am trying to build friend list.
I have tree components,

friends_container:

import React from 'react';
import AddFriend from './add_friend.jsx'
import ShowList from './show_list.jsx'

class FriendsContainer extends React.Component {

    constructor() {
        this.state = {
            friends: ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen']
        }
    }

    addFriend(friend) {
        this.setState({
            friends: this.state.friends.concat([friend])
        });
    }

    render() {
        return (
            <div>
                <h3> Add your friend to friendslist </h3>
                <AddFriend addNew={this.addFriend}/>
                <ShowList names={this.state.friends}/>
            </div>
        )
    }
}

export default FriendsContainer;

add_friend:

import React from 'react';

class AddFriend extends React.Component {

    constructor() {
        this.state = {newFriend: ''};
    }

    updateNewFriend(e) {
        this.setState({
            newFriend: e.target.value
        })
    }

    handleAddNew() {
        this.props.addNew(this.state.newFriend);
        this.setState({
            newFriend: ''
        });
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.newFriend} onChange={this.updateNewFriend}/>
                <button onClick={this.handleAddNew}>Add Friend</button>
            </div>
        )
    }
}

AddFriend.propTypes = { addNew: React.PropTypes.func.isRequired };

export default AddFriend;

show_list:

import React from 'react';

class ShowList extends React.Component {

    render() {
        var listItems = this.props.names.map((f, i) => <li key={i}>{f}</li>);
        return (
            <div>
                <h3>Friends</h3>
                <ul>
                    {listItems}
                </ul>
            </div>
        )
    }
}

ShowList.defaultProps = { names: [] };


export default ShowList;

and app.jsx

import React from 'react';
import FriendsContainer from './components/friends_container.jsx';

window.React = React;

React.render(<FriendsContainer />, document.body);

as you can see on the code, I am using es6 and babel as transcompiler.
My problem, I can not type any letters into the input field to add new friend into friends list. What am I doing wrong?

Alexandre Kirszenberg · Accepted Answer · 2015-04-25 17:08:00Z

2

In the context of your updateNewFriend method, this refers to the window object and not the current component instance. You need to bind the method before passing it as the onChange event handler. See Function::bind.

You have two options:

class AddFriend extends React.Component {

    constructor() {
        // ...
        this.updateNewFriend = this.updateNewFriend.bind(this);
        this.handleAddNew = this.handleAddNew.bind(this);
    }

}

or

class AddFriend extends React.Component {

   render() {
        return (
            <div>
                <input type="text" value={this.state.newFriend} onChange={this.updateNewFriend.bind(this)}/>
                <button onClick={this.handleAddNew.bind(this)}>Add Friend</button>
            </div>
        )
    }

}

Keep in mind that Function::bind returns a new function, so binding in render creates a function every time your component is rendered, though the performance impact is negligible.

answered Apr 25, 2015 at 17:08

Alexandre Kirszenberg

36.4k10 gold badges93 silver badges72 bronze badges

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

4 Comments

softshipper Over a year ago

Do I have to bind function every time, when I use this in the function?

Alexandre Kirszenberg Over a year ago

Only for functions that you pass as props or as event handlers. See the mdn doc on this.

Alexandre Kirszenberg Over a year ago

Using strict mode won't affect that behavior. Using React.createClass instead of ES6 classes will autobind methods for you, so you don't have to bind them manually.

softshipper Over a year ago

What is better, use React.createClass or ES6 classes?

Collectives™ on Stack Overflow

ReactJS: Can not type into input field

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related