CODEWITHSUNDEEP
reactjstypescript
BARNOWL
BARNOWL

Reputation: 3589

React Typescript onChange function typeError

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;

Upvotes: 0

Views: 556

Answers (2)

BARNOWL
BARNOWL

Reputation: 3589

this seems to fix the issue

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

Upvotes: 1

basarat
basarat

Reputation: 276289

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
    });
  };

Upvotes: 0

Related Questions