What type of event should I set this method to?

Question

What type of event should I set the setEndpointState method of this component to. I tried setting it to React.FormEvent<HTMLFormElement> but then I get a type error in the setState function saying that I am missing props name, hostname and description. Is the type of the event wrong or is there a way to write the setState function differently?

import * as React from "react";
import EditBasicInfoForm from "./EditBasicInfoForm";
import { Endpoint } from "../../Endpoints/model";

interface EditBasicInfoProps {
  editBasicInfo: (endpoint: Endpoint) => void;
  ocid: string;
}

interface EditBasicInfoState {
  name: string;
  hostname: string;
  description: string;
}

export class EditBasicInfo extends React.Component<EditBasicInfoProps & EditBasicInfoState, EditBasicInfoState> {
  constructor(props: any) {
    super(props);

    this.state = {
      name: "",
      hostname: "",
      description: ""
    };

    this.setEndpointState = this.setEndpointState.bind(this);
    this.editBasicInfo = this.editBasicInfo.bind(this);
  }

  public setEndpointState(e: React.FormEvent<HTMLFormElement>): void {
    const target = e.currentTarget;
    const value = target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  }

  public editBasicInfo(): void {
    const endpoint: any = {
      name: this.state.name,
      hostname: this.state.hostname,
      description: this.state.description,
      ocid: this.props.ocid,
    };

    this.props.editBasicInfo(endpoint);
  }

  public render(): JSX.Element {
    return (
      <>
        <EditBasicInfoForm
          name={this.state.name}
          hostname={this.state.hostname}
          description={this.state.description}
          handleChange={this.setEndpointState}
          handleSubmit={this.editBasicInfo}
        />
      </>
    );
  }
}

export default EditBasicInfo;

its a SyntheticEvent. Check [this out](https://stackoverflow.com/questions/42081549/typescript-react-event-types) — Tomasz Mularczyk, Mar 22 '18 at 17:02
Possible duplicate of [Typescript: React event types](https://stackoverflow.com/questions/42081549/typescript-react-event-types) — Tomasz Mularczyk, Mar 22 '18 at 17:02
I changed it to ```public setEndpointState(e: React.SyntheticEvent): void { const target = e.currentTarget; const value = target.value; const name = target.name; console.log(e.type); this.setState({ [name]: value }); }``` but I am still getting the same error in the setState call. — vanegeek, Mar 22 '18 at 17:07
What does `EditBasicInfoForm` look like? What triggers the `handleChange`? — Alserda, Mar 22 '18 at 19:28

score 0 · Answer 1 · answered Mar 22 '18 at 20:01

Notice - your state implements the interface EditBasicInfoState, hence every time you setState, it expects a full state that implements that interface to be provided.

You are currently providing it with an object that uses the name as a dynamic key (which probably doesn't exist even on your state), and you are missing the rest of the fields.

See if setting the state with this object {name: '', hostname: '', description: ''} removes the error, just to be sure this is indeed the problem.

If this indeed solves your problem, I suggest going back to the meaning of interfaces in Typescript, and reading about Partial.

score 0 · Answer 2 · answered Mar 22 '18 at 21:39

This is what worked for me. Thanks for all the help!

public setEndpointState(e: React.SyntheticEvent<HTMLInputElement>): void {
    const target = e.currentTarget;
    const name = target.name;
    const value = target.value;

    this.setState({
      ...this.state,
      [name]: value
    });
  }

What type of event should I set this method to?

2 Answers2