CODEWITHSUNDEEP
reactjsonchangereact-hooks
Daniel Haiem
Daniel Haiem

Reputation: 21

My "onChange" function is not firing when the value of my input changes - using React Hooks

I copied the code below and made some slight modifications. For whatever reason, I cannot type into the form. After throwing in some logs, I can see that the handleSubmit function is not even being called.

I am using this component in the context of a larger React-Redux app. To test if somehow the redux cycle is affecting the rendering if this component, I got rid of the connect redux function, but still - no changes. Please help.

const Lose = props => {
  const [username, setUsername] = useState();

  const handleChangeUsername = e => {
    setUsername(e.target.value);
  };

  const handleSubmit = event => {
    alert(username);
    event.preventDefault();
  };

  return (
    <div className={'main_popup'}>
      <H3
        text={`Nice game! You obliterated: ${
          props.monstersKilled
        } monsters. Enter your name to have your badassery forever recorded`}
      />
      <form onSubmit={handleSubmit}>
        Username:
        <input type="text" value={username} onChange={handleChangeUsername} />
      </form>
    </div>
  );
};

const mapStateToProps = state => ({
  ...state.popUp,
  ...state.player
});

export default connect(mapStateToProps)(handlePopUp(Lose));

Here is the code that calls the above component:

 class Player extends Component {
  componentDidUpdate(prevProps) {
    checkIfDead();
  }
  render() {
    return (
      <div
        style={{
          position: 'absolute',
          top: this.props.position[1],
          left: this.props.position[0],
          backgroundImage: `url('${
            this.props.status === 'HURT'
              ? walkSpriteHurt
              : this.props.status === 'LEVEL_UP_YELLOW'
              ? walkSpriteLevelUpYellow
              : this.props.status === 'LEVEL_UP_BLACK'
              ? walkSpriteLevelUpBlack
              : walkSprite
          }')`,
          backgroundPosition: this.props.spriteLocation,
          width: '40px',
          height: '40px'
        }}
      >
        <div style={{ position: 'absolute', bottom: '20px' }}>
          <progress
            id="health"
            value={this.props.stats.health}
            max={this.props.stats.totalHealth}
            style={{ width: '100px' }}
          />
        </div>
      </div>
    );
  }
}

function checkIfDead() {
  if (
    store.getState().player.stats.health <= 0 &&
    store.getState().player.dead === false
  ) {
    store.dispatch({ type: 'KILL_PLAYER' });
    store.dispatch({
      type: 'CHANGE_POP_UP',
      payload: {
        type: 'Highscore'
      }
    });
  }
}

const mapStateToProps = state => ({
  ...state.player,
  ...state.fire
});

export default connect(mapStateToProps)(handleKeyPress(Player));

Upvotes: 0

Views: 1010

Answers (1)

Daniel Haiem
Daniel Haiem

Reputation: 21

Ok, I figured it out! So the form was nested in a component that already had window.eventListener('keydown') attached to it. Once I moved the event listener into a different component, the onChange function in the React form started working again. Wooooo.

Done with that.

Upvotes: 2

Related Questions