React Component not updating when state props change

Question

I am trying to render a list of stocks as a list of buttons, and I am using mapStateToProps and connect to connect my react component to the redux store. Here is the component that does the rendering

import React, {Component} from 'react';
import {connect} from 'react-redux';

class StockList extends Component {
    super(props){
        constructor(props);
        this.renderButton = this.renderButton.bind(this);
    }

    renderButton(stock){
        return(
            <button key={stock} type='button' className='btn btn-primary stock-btn'>
                {stock}
                <span className='glyphicon glyphicon-remove' aria-hidden='true'
                onClick={() => this.props.onClick(stock)}></span>
            </button>
        )
    }

    render() {
        if(this.props.stocks){
            return (
                <div>
                    {this.props.stocks.map(stock => {
                        return this.renderButton(stock);
                    })}
                </div>
            )
        }else{
            return(
                <div>Loading...</div>
            )
        }
    }
}

StockList.propTypes = {
    onClick: React.PropTypes.func.isRequired
};

const mapStateToProps = (state) => {
    console.log(state);
    return {
        stocks: state.get(['tickers'])
    }
}

export default connect(mapStateToProps, null)(StockList);

Just to be sure that my state was being updated, and not mutated, I used redux-logger middleware to check that the state was changing. Here's the snapshot of that presented in the console

action @ 22:43:44.408 SET_TICKERS
core.js:111  prev state Map {size: 0, _root: undefined, __ownerID: undefined, __hash: undefined, __altered: false}
core.js:115  action Object {type: "SET_TICKERS", state: Object}state: Objecttickers: Array[3]0: "AAPL"1: "TSLA"2: "GOOGL"length: 3__proto__: Array[0]__proto__: Objecttype: "SET_TICKERS"__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: __proto__()set __proto__: __proto__()
core.js:123  next state Map {size: 1, _root: ArrayMapNode, __ownerID: undefined, __hash: undefined, __altered: false}

Since I am using Immutable JS, and the state is updating, I can't seem to figure out why my component will not update to show the correct props. It doesn't change from the initial undefined.

The closest thread I have found to my issue, is this github link https://github.com/reactjs/redux/issues/585

I checked out the solutions on there, but no luck.

It's worth pointing out that in your code you have constructor() and super() the wrong way round. — Alex Young

random_coder_101 random_coder_101 · Accepted Answer · 2016-12-06T17:33:28

Okay, it was a simple syntax error, but I'll leave it on here just in case someone else faces the same issue.

The only thing that needs to change is the line

const mapStateToProps = (state) => {
    console.log(state);
    return {
        stocks: state.get(['tickers']) //this line needs to change
    }
}

to

const mapStateToProps = (state) => {
    console.log(state);
    return {
        stocks: state.get('tickers') //remove the brackets denoting array
    }
}

React Component not updating when state props change

1 Answers