React Input Element Not Updating When Updating Component

Question

I'm trying to make a React version of this.

You can see what I have so far on this Codepen.

The issue here is that when you type into a text field (under the "Suspected Player" column) and then click the adjacent name (under the "Role" column) to remove that row, the text persists inside the input, and is then adjacent to a different name.
The expected behavior is that you'd click the name to remove the row and both the elements (the name and text input) would disappear.

All the items in the table are stored in an array called checklist in the state of the RoleList class.

The component for each list item in the table is this:

class RoleCheckpoint extends React.Component {
    constructor() {
        super();
        this.state = {
            text: ""
        };
    }

    deleteThis() {
        this.props.removeRole(this.props.role.id);
    }

    onChange(e) {
        this.setState({
            text: e.target.value
        });
    }

    render() {
        console.log(this.props);

        return (
            <tr>
                <td className="vertAlign remove noselect" onClick={this.deleteThis.bind(this)}>
                    {this.props.role.el}
                </td>
                <td>
                    <input type="text" className="form-control" spellCheck="false" onChange={this.onChange.bind(this)} value={this.state.text} />
                </td>
            </tr>
        );
    }
}

When you click on the name it invokes the components deleteThis function, which in turn invokes RoleList's removeRole function (that goes through the array of list items, and removes the one with the matching ID from the components state), which is being passed as a prop to RoleCheckpoint.

I've tried using this.forceUpdate() in the deleteThis function, and as you can see I've tried binding the input field's value to the components state (called text), yet still the input doesn't update when removing the component from the DOM.

Any help is appreciated, if you need more clarification I'll be happy to provide it.

Nick · Accepted Answer · 2017-02-23 22:01:52Z

2

A "key" is a special string attribute you need to include when creating lists of elements.

<RoleCheckpoint role={role} key={role.id} removeRole={this.removeRole.bind(this)} />

answered Feb 23, 2017 at 22:01

Nick

1,5702 gold badges16 silver badges23 bronze badges

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

Comments

Meier · Accepted Answer · 2017-02-23 22:03:50Z

0

The behaviour is typical when you have a list of components and you have not set the key of the objects correctly. It need to be something that identifies the object. Probably you can use the name field:

<RoleCheckpoint key={role.name} .../>

See https://facebook.github.io/react/docs/lists-and-keys.html

answered Feb 23, 2017 at 22:03

Meier

3,9301 gold badge22 silver badges47 bronze badges

Collectives™ on Stack Overflow

React Input Element Not Updating When Updating Component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related