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

Question

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!

this is maybe a duplicate of my question stackoverflow.com/questions/49197056/… but I can't see how to use it. — Baha
– Baha, Commented Nov 18, 2018 at 14:34
Why do you have a type object in React.Component<>? I don't think it's necessary and probably it's what causes your problem. When I have to extend a component in Typescript I usually pass React.Component<PropsType, StateType> and then in the costructor I initialize the state defined in the StateType — Milore
– Milore, Commented Nov 18, 2018 at 14:40
@Milore I'm not sure, I copied a template from a coworker code, but I see it common to pass {} in code I saw here on SOF, what edit do you suggest then? what should I pass instead or what to write in the constructor? — Baha
– Baha, Commented Nov 18, 2018 at 14:44
If you just need to inherit props declare it as you did: React.Component<IMaterialUIComponentProps>. I think that's enough. On the contrary, if you need to define a state, I suggest you to define a IState interface on top of you component (out of the class I mean) and pass it to your component as you did for object: React.Component<IMaterialUIComponentProps, IState> — Milore
– Milore, Commented Nov 18, 2018 at 14:50
I defined an interface and passed it instead of the object and I don't see the error anymore thanks @Milore — Baha
– Baha, Commented Nov 18, 2018 at 14:54

Leela Venkatesh K · Accepted Answer · 2018-11-19 05:20:30Z

1

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

answered Nov 19, 2018 at 5:20

Leela Venkatesh K

1,7601 gold badge16 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related