React Typescript onChange function typeError

Question

I'm trying to implement a simple onChange function, but this onChange function in typescript gives an error

Argument of type '{ [x: number]: any; }' is not assignable to parameter of type 'registerState | ((prevState: Readonly, props: Readonly) => registerState | Pick | null) | Pick<...> | null'. Type '{ [x: number]: any; }' is missing the following properties from type 'Pick': username, password, email, passwordConf TS2345

 handleChange = (e: any) => {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    });
  };

Would anyone have a solution for this ? because doing the following does not give me the functionality i want.

  handleChange = (e: any) => {
    e.preventDefault();
    this.setState({
      username: e.target.value,
      password: e.target.value,
      email: e.target.value,
      passwordConf: e.target.value
    });
  };

register.tsx

import React, { Component, Fragment } from "react";
import Typography from "@material-ui/core/Typography";
import SignUpForm from "../forms/signUp/signUp";
import GridHoc from "../hoc/grid";

export interface registerProps {}
export interface registerState {
  username: string;
  password: string;
  email: string;
  passwordConf: string;
}
class Register extends Component<registerProps, registerState> {
  state: registerState = {
    username: "",
    password: "",
    email: "",
    passwordConf: ""
  };

  handleChange = (e: any) => {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    });
  };
  render() {
    return (
      <Fragment>
        <Typography variant="h4" style={{ letterSpacing: "2px" }}>
          Register
        </Typography>
        <SignUpForm
          username={this.state.username}
          password={this.state.password}
          email={this.state.email}
          passwordConf={this.state.passwordConf}
          signUpOnChange={this.handleChange}
        />
      </Fragment>
    );
  }
}
export default GridHoc(Register);

signUpForm.tsx

import React from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const SignUpForm = (props: any) => (
  <form onSubmit={props.submit}>
    <TextField
      label="Username"
      style={{ width: "100%" }}
      name="username"
      value={props.username}
      onChange={props.signUpOnChange}
      margin="normal"
    />
    <br />
    <TextField
      label="Email"
      className=""
      style={{ width: "100%" }}
      name="email"
      value={props.email}
      onChange={props.signUpOnChange}
      margin="normal"
    />
    <br />
    <TextField
      label="Password"
      name="password"
      type="password"
      style={{ width: "100%" }}
      className=""
      value={props.password}
      onChange={props.signUpOnChange}
      margin="normal"
    />
    {/*  */}
    <br />
    <TextField
      label="Confirm Password"
      name="passwordConf"
      type="password"
      style={{ width: "100%" }}
      className=""
      value={props.passwordConf}
      onChange={props.signUpOnChange}
      margin="normal"
    />
    <br />
    <br />

    <Button variant="outlined" color="primary" type="submit">
      Sign Up
    </Button>
  </form>
);

export default SignUpForm;

Can you share the signUpOnChange callback declaration?

Tsvetan Ganev
– Tsvetan Ganev

2019-10-21 20:21:54 +00:00
Commented Oct 21, 2019 at 20:21 — Tsvetan Ganev
– Tsvetan Ganev, Commented Oct 21, 2019 at 20:21
ok i just updated the code

BARNOWL
– BARNOWL

2019-10-21 20:23:07 +00:00
Commented Oct 21, 2019 at 20:23 — BARNOWL
– BARNOWL, Commented Oct 21, 2019 at 20:23

BARNOWL · Accepted Answer · 2019-10-21 21:46:21Z

1

this seems to fix the issue

  handleChange = (e: any) => {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    } as any);
  };

answered Oct 21, 2019 at 21:46

BARNOWL

3,62913 gold badges50 silver badges85 bronze badges

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

Comments

basarat · Accepted Answer · 2019-10-21 21:23:30Z

0

In this code:

 handleChange = (e: any) => {
    e.preventDefault();
    this.setState({
      [e.target.name]: e.target.value
    });
  };

Error occurs because e.target.name is a string and TypeScript cannot know for certain that it is going to be a valid key inside the type State.

Fix

Just a quick assertion will do:

 handleChange = (e: any) => {
    e.preventDefault();
    this.setState({
      [e.target.name as keyof registerState]: e.target.value
    });
  };

answered Oct 21, 2019 at 21:23

basarat

278k60 gold badges475 silver badges528 bronze badges

1 Comment

BARNOWL Over a year ago

thanks for the answer, but the error still persists

Collectives™ on Stack Overflow

React Typescript onChange function typeError

2 Answers 2

Comments

Fix

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Fix

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related