React: convert createClass to ES6 class

Question

I would like to convert code with createClass to ES6 classes. I'm having some trouble when it comes to the class with the getInitialState function.

Below is the code I am trying to convert:

var StockRow = React.createClass({
    render: function () {
        var lastClass = '',
            changeClass = 'change-positive',
            iconClass = 'glyphicon glyphicon-triangle-top';
        if (this.props.stock === this.props.last) {
            lastClass = this.props.stock.change < 0 ? 'last-negative' : 'last-positive';
        }
        if (this.props.stock.change < 0) {
            changeClass = 'change-negative';
            iconClass = 'glyphicon glyphicon-triangle-bottom';
        }
        return (
            <tr>
                <td>{this.props.stock.symbol}</td>
                <td>{this.props.stock.open}</td>
                <td className={lastClass}>{this.props.stock.last}</td>
                <td className={changeClass}>{this.props.stock.change} <span className={iconClass} aria-hidden="true"></span></td>
                <td>{this.props.stock.high}</td>
                <td>{this.props.stock.low}</td>              
            </tr>
        );
    }
});

var StockTable = React.createClass({
    render: function () {
        var items = [];
        for (var symbol in this.props.stocks) {
            var stock = this.props.stocks[symbol];
            items.push(<StockRow key={stock.symbol} stock={stock} last={this.props.last} />);
        }
        return (
            <div className="row">
            <table className="table-hover">
                <thead>
                    <tr>
                        <th>Symbol</th>
                        <th>Open</th>
                        <th>Last</th>
                        <th>Change</th>
                        <th>High</th>
                        <th>Low</th>
                    </tr>
                </thead>
                <tbody>
                    {items}
                </tbody>
            </table>
            </div>
        );
    }
});

var HomePage = React.createClass({
    getInitialState: function() {
        var stocks = {};
        feed.watch(['MCD', 'BA', 'BAC', 'LLY', 'GM', 'GE', 'UAL', 'WMT', 'AAL', 'JPM']);
        feed.onChange(function(stock) {
            stocks[stock.symbol] = stock;
            this.setState({stocks: stocks, last: stock});
        }.bind(this));
        return {stocks: stocks};
    },
    render: function () {
        return (
            <div>
                <StockTable stocks={this.state.stocks} last={this.state.last}/>
            </div>
        );
    }
});

This is what I have for the first two:

class StockRow extends React.Component{
    constructor(props, context) {
        super(props, context);
    }
    render: function () {
        var lastClass = '',
            changeClass = 'change-positive',
            iconClass = 'glyphicon glyphicon-triangle-top';
        if (this.props.stock === this.props.last) {
            lastClass = this.props.stock.change < 0 ? 'last-negative' : 'last-positive';
        }
        if (this.props.stock.change < 0) {
            changeClass = 'change-negative';
            iconClass = 'glyphicon glyphicon-triangle-bottom';
        }
        return (
            <tr>
                <td>{this.props.stock.symbol}</td>
                <td>{this.props.stock.open}</td>
                <td className={lastClass}>{this.props.stock.last}</td>
                <td className={changeClass}>{this.props.stock.change} <span className={iconClass} aria-hidden="true"></span></td>
                <td>{this.props.stock.high}</td>
                <td>{this.props.stock.low}</td>              
            </tr>
        );
    }
}

class StockTable extends React.Component{
    constructor(props, context) {
        super(props, context);
    }
    render: function () {
        var items = [];
        for (var symbol in this.props.stocks) {
            var stock = this.props.stocks[symbol];
            items.push(<StockRow key={stock.symbol} stock={stock} last={this.props.last} />);
        }
        return (
            <div className="row">
            <table className="table-hover">
                <thead>
                    <tr>
                        <th>Symbol</th>
                        <th>Open</th>
                        <th>Last</th>
                        <th>Change</th>
                        <th>High</th>
                        <th>Low</th>
                    </tr>
                </thead>
                <tbody>
                    {items}
                </tbody>
            </table>
            </div>
        );
    }
}

However, I am unsure how to approach the final class, especially with respect to the getInitialState function.

Any help would be appreciated!

EDIT:

Here is what I have for the third class:

class HomePage extends React.Component{
    constructor(props, context) {
        super(props, context);
        this.state = {
            stocks = {}
        }

    }
    getData() {
        var stocks = {};
        feed.watch(['MCD', 'BA', 'BAC', 'LLY', 'GM', 'GE', 'UAL', 'WMT', 'AAL', 'JPM']);
        feed.onChange(function(stock) {
            stocks[stock.symbol] = stock;
            this.setState({stocks: stocks, last: stock});
        }.bind(this));
        return {stocks: stocks};
    }
    componentDidMount() {
        this.getData();
    }
    render: function () {
        return (
            <div>
                <StockTable stocks={this.state.stocks} last={this.state.last}/>
            </div>
        );
    }
}

raphaelSeguin · Accepted Answer · 2018-12-20 17:28:26Z

1

You must replace getInitialState by initializing the state variable in the constructor.

constructor(props, context) {
    super(props, context);
    state = {stocks}
}

If you have to fetch some values to initialize the state properly, you can do it in the componentDidMount method

componentDidMount() {
    fetchInfos().then( infos => this.setState({...infos}) );
}

answered Dec 20, 2018 at 17:28

raphaelSeguin

4341 gold badge3 silver badges13 bronze badges

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

1 Comment

thewire Over a year ago

I updated the OP with what I have for the third class now, but it still does not work.

Vakaren · Accepted Answer · 2018-12-20 18:20:25Z

0

You can't use stocks in your constructor since you don't have access to it yet (unless you pass down an initial value via props). You can initialize it and update the state later, e.g. in componentDidMount():

constructor(props) {
  super(props)
  this.state = {
    stocks = {}
  }
}

componentDidMount() {
  // fetch stocks and this.setState({ stocks })
}

answered Dec 20, 2018 at 18:20

Vakaren

1111 silver badge4 bronze badges

2 Comments

thewire Over a year ago

I updated the constructor at the bottom of the OP. But it still doesn't work. Is there something wrong with the getData() function?

Vakaren Over a year ago

@thewire Do you get an error? Can you log the state inside render()?

Collectives™ on Stack Overflow

React: convert createClass to ES6 class

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related