JavaScript React Components Managing State and Data Flow Controlled Components

Gennadii Chamorsov
Gennadii Chamorsov
8,494 Points

After setting the value of input to this.state.value the possibility of typing in there is blocked.

Console doesn't throw any error. here is the code of my AddPlayerForm component:

import React, { Component } from 'react';

class AddPlayerForm extends Component {

  state = {
    value: ''
  };

  handleValueChange = (e) => {
    this.setState = ({ value: e.target.value });
  }

  render() {
    return (
      <form>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleValueChange}
          placeholder="Enter a player's name"
        />

        <input
          type="submit"
          value="Add Player"
        />
      </form>
    );
  }
}


export default AddPlayerForm;

1 Answer

Blake Larson
Blake Larson
12,878 Points

Remember that setState is a function.

handleValueChange = (e) => this.setState({ value: e.target.value });