React js getInitialState not working after converting to es6 [duplicate]

Question

When I converted regular react javascript code to es6 i'm getting these two errors in console:

Warning: getInitialState was defined on TopicsList, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

Uncaught TypeError: Cannot read property 'isTopicClicked' of null

I would like to set isTopicClicked to false initially.

import React from 'react';
import ReactDOM from 'react-dom';

class TopicsList extends React.Component {

    getInitialState() {
        return {
            isTopicClicked : false,
            topicPages
        };
    }

    onClick(topicID) {
        this.setState({isTopicClicked : true});
        this.setState({topicsID : topicID});
    }

    render() {
        return (
            <div>
                <div className="row topic-list">
                    <SingleTopicBox 
                        topicID="1" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                    <SingleTopicBox 
                        topicID="2" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                    <SingleTopicBox 
                        topicID="3" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                    <SingleTopicBox 
                        topicID="4" 
                        onClick={this.onClick} 
                        label="Topic"
                        />
                </div>
                <div className="row">
                { this.state.isTopicClicked ? <SelectedTopicPage topicsID={this.state.topicsID} key={this.state.topicsID} topicPages={topicPages} /> : null }
                </div>
            </div>
        );
    }
};


class SingleTopicBox extends React.Component {

    render() {
        return (
            <div>
                <div className="col-sm-2">
                    <div onClick={this.props.onClick.bind(null, this.props.topicID)} className="single-topic" data-topic-id={this.props.topicID}>
                        {this.props.label} {this.props.topicID}
                    </div>
                </div>
            </div>
        );
    }
};

var topicPages = [
    { 
        topic_no: '1',
        topic_pages: [
            {
                headline: 'Topic 1 headline', 
                description: 'Topic 1 description comes here...page 1'
            },
            {
                headline: 'Topic 1 headline', 
                description: 'Topic 1 description comes here...page 2'
            },
            {
                headline: 'Topic 1 headline', 
                description: 'Topic 1 description comes here...page 3'
            }
        ]
    },
    { 
        topic_no: '2',
        topic_pages: [
            {
                headline: 'Topic 2 headline', 
                description: 'Topic 2 description comes here...page 1'
            },
            {
                headline: 'Topic 2 headline', 
                description: 'Topic 2 description comes here...page 2'
            },
            {
                headline: 'Topic 2 headline', 
                description: 'Topic 2 description comes here...page 3'
            }
        ]
    },
    { 
        topic_no: '3',
        topic_pages: [
            {
                headline: 'Topic 3 headline', 
                description: 'Topic 3 description comes here...page 1'
            },
            {
                headline: 'Topic 3 headline', 
                description: 'Topic 3 description comes here...page 2'
            },
            {
                headline: 'Topic 3 headline', 
                description: 'Topic 3 description comes here...page 3'
            }
        ]
    },
    { 
        topic_no: '4',
        topic_pages: [
            {
                headline: 'Topic 4 headline', 
                description: 'Topic 4 description comes here...page 1'
            },
            {
                headline: 'Topic 4 headline', 
                description: 'Topic 4 description comes here...page 2'
            },
            {
                headline: 'Topic 4 headline', 
                description: 'Topic 4 description comes here...page 3'
            }
        ]
    },

];

class SelectedTopicPage extends React.Component {
    getInitialState() {
      return{
        topicPageNo: 0,
        total_selected_topic_pages: 1
      }
    }
    navigateBack() {
        let topicPageNo;
        if (this.state.topicPageNo > 0){
            topicPageNo = this.state.topicPageNo - 1;   
        }
        else {
            topicPageNo = 0;
        }
        this.setState({topicPageNo : topicPageNo});
    }
    navigateNext(totalPagesInSelectedTopic) {
        let topicPageNo;
        if (totalPagesInSelectedTopic > this.state.topicPageNo + 1){
            topicPageNo = this.state.topicPageNo + 1;
        }
        else {
            topicPageNo = this.state.topicPageNo;
        }
        this.setState({topicPageNo : topicPageNo});
    }
    render() {
        let topicsID = this.props.topicsID;
        let topicPageNo = this.state.topicPageNo;
        return (
            <div>
                {this.props.topicPages.filter(function(topicPage) {
                    // if condition is true, item is not filtered out
                    return topicPage.topic_no === topicsID; 
                }).map(function (topicPage) {
                    let totalPagesInSelectedTopic = topicPage.topic_pages.length;
                    return (
                        <div>
                            <div>
                            <SelectedTopicPageMarkup headline={topicPage.topic_pages[0].headline} key={topicPage.topic_no}>
                                {topicPage.topic_pages[topicPageNo].description}
                            </SelectedTopicPageMarkup> 
                            </div>
                            <div>
                                <NextPrevBtn moveNext={this.navigateNext.bind(this, totalPagesInSelectedTopic)} key={topicPage.topic_no} moveBack={this.navigateBack}/>
                            </div>
                        </div>
                    );
                }.bind(this))}
            </div>
        );
    }
};


class SelectedTopicPageMarkup extends React.Component {

    render() {    
        return (
            <div className="topics-page">
                <h1>{this.props.headline}</h1>
                <p>{this.props.children}</p>
            </div>
        );
    }
};


class NextPrevBtn extends React.Component {
    render() {    
        return (
            <div className="next-prev-btn">
                <a onClick={this.props.moveBack} className="btn prev-btn">Back</a>
                <a onClick={this.props.moveNext} className="btn next-btn">Next</a>
            </div>
        );
    }
};

export default TopicsList;

I'm using webpack with baber-loader for compilation.

Did you read the error message? Is it unclear?

Felix Kling
– Felix Kling

2016-02-02 14:49:55 +00:00
Commented Feb 2, 2016 at 14:49 — Felix Kling
– Felix Kling, Commented Feb 2, 2016 at 14:49

Henrik Andersson · Accepted Answer · 2016-02-02 10:37:01Z

7

getInitialState isn't used when writing components in ES2015. Using the constructor() instead is the way to go.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { myState: 1 };
    }
    render() { ... }
}

or depending on what stage of ES2015 you have access to you can use ES7 property initializers

class MyComponent extends React.Component {
    state = { myState: 1};
    render() {}
}

edited Feb 2, 2016 at 10:37

answered Feb 2, 2016 at 10:29

Henrik Andersson

47.5k16 gold badges102 silver badges94 bronze badges

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

5 Comments

Rahul Dagli Over a year ago

Can you please share an example.

Rahul Dagli Over a year ago

Thanks that error got fixed however i'm getting an error with this.setState Uncaught TypeError: Cannot read property 'setState' of null. Do I need to change that as well?

Dan Caragea Over a year ago

@RahulDagli you need to change all onClick={this.onClick} to onClick={this.onClick.bind(this)} or (depending on what stage you're using in babel) onClick={::this.onClick}

Rahul Dagli Over a year ago

I'm getting one more error Uncaught TypeError: Cannot read property 'state' of null on this.state.topicPageNo

Henrik Andersson Over a year ago

Keep binding them functions

Collectives™ on Stack Overflow

React js getInitialState not working after converting to es6 [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related