CODEWITHSUNDEEP
reactjstypescript
Baha
Baha

Reputation: 408

react.js with typescript, property doesn't exist on type object error on state

I'm trying to use the code from react.js docs about forms, but I'm using it with typescript, the code is on this link but when I added it to the typescript file I got an error Property 'value' does not exist on type 'object'.

class MailListSubscribe extends React.Component<
  IMaterialUIComponentProps,
  object
> {
constructor(props: any) {
    super(props);
    this.state = {value: ''};

    this.handleSubmit = this.handleSubmit.bind(this);
  }
    handleSubmit(event: any) {
    // error appears on this.state.value
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }
public render() {
return (
<form onSubmit={this.handleSubmit}>
          <label>
            Name:
            // error appears again on this.state.value
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
);

Any help is appreciated, thanks!

Upvotes: 1

Views: 5657

Answers (1)

Leela Venkatesh K
Leela Venkatesh K

Reputation: 1730

React.Component has the type definition similar to Component<{ [key:string}: any}, {[key:string]: any}>, i.e., it can take any Object with a string key and any value type.

However, when we try to specify object it is not the case. Instead it tries to emulate the type to be of 'Object' type. So it wont be able to find any custom values from it. Check this from official typescript documentation. I think they have enough description to explain the issue.

Also, just declare the type of your component state like below:

interface IState {
    value: string;
}

Upvotes: 1

Related Questions