State is null in React

Question

I receive this error:

TypeError: this.state is null

Have code like this, but it does not work .... Any idea why?

I want to change the text of a label (reanalyzeButton)

Read several docs and tutorials and it seem it should work. No idea why it behaves like this.

This is inherited code I work with using React 0.13

var ProjectHeader = React.createClass({

    displayName: 'ProjectHeader',
    intervalId: null,
    state: {
    projectjson: [],
    label: '',
  },

    componentDidMount() {


        // Now we need to make it run at a specified interval
        this.intervalId = setInterval(this.refresh, 1000);
        this.setState({ label: '<span><i className="octicon octicon-sync" /> Project queued for analysis: <strong>{queuePosition}</strong>.</span>'});
      },

refresh : function(){

   if (this.state.projectjson.analysis_status == 'succeeded') {

      clearInterval(this.intervalId);
     this.setState({label: '<A onClick={this.analyzeProject} title="Request an analysis of the project"><i className="octicon octicon-sync"/> Check for new commits</A>'});
    }

render : function(){

  if (props.project.analysis_status == 'in_progress') {
            //reanalyzeButton = <A onClick={this.analyzeProject} title="Request a re-analysis of the project"><i className="fa fa-refresh fa-spin" /> Analysis in progress</A>
            reanalyzeButton = this.state.label
        } else if ((!props.project.analyze) || props.project.analysis_priority == 0) {
            //reanalyzeButton = <A onClick={this.analyzeProject} title="Request an analysis of the project"><i className="octicon octicon-sync"/> Check for new commits</A>
           reanalyzeButton = this.state.label
        } else {
            //reanalyzeButton = <span><i className="octicon octicon-sync" /> Project queued for analysis: <strong>{queuePosition}</strong>.</span>
            reanalyzeButton = this.state.label
        }

 return  <div className="project-header" itemScope itemType="http://schema.org/Code">
                    <div className="row">
                        <div className="col-xs-12 col-sm-9">
                            <div className="clearfix">
                                {projectHeader}
                            </div>
                        </div>
                        <div className="col-xs-12 col-sm-3">
                            <span className="qc-badge">
                            {badge}
                            </span>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-xs-12">
                            <ul className="meta">
                                {fetchStatus}{projectInfo} <li>{reanalyzeButton}</li>
                            </ul>
                            <ul className="tags hidden-xs">
                                {tagList}
                            </ul>
                        </div>
                    </div>

Any reason why you're using such an old react version?

Jesse Schokker
– Jesse Schokker

2020-04-06 12:06:35 +00:00
Commented Apr 6, 2020 at 12:06 — Jesse Schokker
– Jesse Schokker, Commented Apr 6, 2020 at 12:06
This is inherited code

Evgeny Timoshenko
– Evgeny Timoshenko

2020-04-06 12:07:02 +00:00
Commented Apr 6, 2020 at 12:07 — Evgeny Timoshenko
– Evgeny Timoshenko, Commented Apr 6, 2020 at 12:07

philgiese · Accepted Answer · 2020-04-06 12:08:32Z

1

You need to specify a getInitialState method in order to set the initial state. See here: https://reactjs.org/docs/react-without-es6.html#setting-the-initial-state

answered Apr 6, 2020 at 12:08

philgiese

6511 gold badge7 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

State is null in React

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