this.state is null inside render React and Typescript

Question

I am a novice in ReactJS. Was watching a tutorial that is recorded in ES6 JavaScript and simultaneously I am trying to recreate the same app in TypeScript (I am a novice in TypeScript too!!). In ES6 we need to use a class based approach if that particular component needs to maintain it's own state. I have installed "babel-plugin-transform-class-properties" so i do set state in ES6 as export default class SomeClass { state = { someProperty : someValue }}. But in TypeScript I am using class based approach for every component. So here is a component that tries to maintain it's own state:

import React from 'react';

interface IAddOptionProps {
    handleAddOption: (option: string) => string |null;
};

interface IAddOptionState {
    error: any;
};

export default class AddOption extends React.Component<IAddOptionProps, IAddOptionState> {
    handleAddOption = (e:any) => {
        e.preventDefault();
        const option = e.target.elements.option.value.trim();
        const err : string = this.props.handleAddOption(option);

        this.setState(() => {
            return {
                error: err
            }
        });

        if (!err) {
            e.target.elements.option.value = '';
        }
    }

    render() {
        console.log(this.state);
        return (
            <div>
                {this.state.error != null ? <p>{this.state.error}</p> : ''}
                <form onSubmit={this.handleAddOption}>
                    <div className="form-group">
                        <label>Enter an Option</label>
                        <input type="text" className="form-control" id="option"  name="option"/>
                    </div>
                    <button className="btn btn-primary">Add option</button>
                </form>
            </div>
        );
    }
};

The statement console.log(this.state); and {this.state.error != null ? <p>{this.state.error}</p> : ''} inside render() is throwing error stating that Uncaught TypeError: Cannot read property 'error' of null. That means this.state is being set as null.

Why is state getting set to null and how do I resolve this ( In TypeScript )?

Thanks in Advance.

because you didn't define the state, put this inside class: state = {error: ''} or use constructor. — Mayank Shukla
– Mayank Shukla, Commented Feb 17, 2018 at 8:54
Thanks. But I have declared an Interface and passed it as a Generic argument. Isn't it sufficient? — Abhilash D K
– Abhilash D K, Commented Feb 17, 2018 at 8:56
In super() props will be passed on to the parent component, but I want state only to be maintained in this component. — Abhilash D K
– Abhilash D K, Commented Feb 17, 2018 at 9:00
I have one more question, we need to use super(props) only if we define a constructor, if we don't need a constructor in a particular component then no need of super(props)? My doubt is constructor(props) { super(props); } is mandatory or optional. — Abhilash D K
– Abhilash D K, Commented Feb 17, 2018 at 9:02

chkal · Accepted Answer · 2018-02-17 09:33:22Z

5

As already mentioned in the comments, you have to initialize the state either in the constructor or with a property initializer like this:

class AddOption extends React.Component<IAddOptionProps, IAddOptionState> {

  this.state = {
    error: ''
  };

  [...]

}

Otherwise state will be null and you will get an error like mentioned in your post.

answered Feb 17, 2018 at 9:33

chkal

5,66824 silver badges27 bronze badges

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

2 Comments

Abhilash D K Over a year ago

Thanks. I initialized state as a property and it’s working now👍

kevin_fitz Over a year ago

Not sure if it's a version thing, but i believe this needs to be omitted now. If i add it without it being in a constructor, I get an error this.state = become state =

Edoardo L'Astorina · Accepted Answer · 2018-02-17 10:59:18Z

2

You have to initialize your state. There are two ways to do that

The first is to use a property initializer

class AddOption extends React.Component<IAddOptionProps, IAddOptionState> {

  this.state = {
    error: ''
  };

  render() {

    // Now you have your state! Do stuff here

  }

}

The other way is to do it in the constructor

class AddOption extends React.Component<IAddOptionProps, IAddOptionState> {

  constructor(props) {
    super(props);

    this.state = {
      error: ''
    };
  }

  render() {

    // Now you have your state! Do stuff here

  }

}

The solutions are equivalent, though the first is more elegant

answered Feb 17, 2018 at 10:59

Edoardo L'Astorina

7,2852 gold badges15 silver badges9 bronze badges

2 Comments

Dave Hillier Over a year ago

The second gives a warning in my case

Edoardo L'Astorina Over a year ago

What warning do you get @DaveHillier?

Collectives™ on Stack Overflow

this.state is null inside render React and Typescript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related