React controlled form input not changing despite correct change handling

Question

Before flagging this as a duplicate, I have read and considered Can't type in React input text field and other similar questions. I have also read the React docs on this subject.

The problem I am running into is that I believe I have correctly initialized local state to props, and bound change handler, but I'm still not able to type in the input field.

class MyComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            userData: {
                firstName: props.userData.firstName
            }
        };

        this.handleChange = this.handleChange.bind(this);
    }

    render() {
        return (
            <div>
                <button onClick={this.onClick}>Edit</button>
                <div>
                    <form onSubmit={this.handleFormSubmit}>
                        <input
                            className="form-item"
                            placeholder="Enter First Name"
                            value={this.state.userData.firstName}
                            name="firstName"
                            type="text"
                            onChange={this.handleChange}
                        />
                    </form>
                </div>
            </div>
         );
      }

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

In case it's important, my props are coming from Redux store:

function mapStateToProps(state) {
    return {
        userData: state.userData
    };
}

export default connect(mapStateToProps)(MyComponent);

Ideas?

score 1 · Accepted Answer · answered Jun 17 '18 at 14:05

Change your handleChange function as,

handleChange(e) {
  let userData = this.state.userData;
  userData.firstName = e.target.value;
        this.setState({
            userData :userData 
        });
    }

You are setting value and reading value from different objects

React controlled form input not changing despite correct change handling

1 Answers1