Redux React Highcharts (Highmaps) issue passing map config from app state

Question

Technologies used: Redux, React, React-Highcharts (Highmaps)

Disclaimer: First Redux application, be nice please...

Status: I am sure there are some issues with my redux set up, but through console testing I can see that my onClick function is correctly triggering the dispatch and updating my state. (Basically a toggle between the visibility of map points).

Issue: I need to set up the configuration of my map to come from my application state. But when I try to pass it as props I am getting errors. I have tried multiple ways but to no avail.

Here is what I have tried:

1:

class Test extends React.Component {


render() {
    console.log(this.props.mapConfig + + 'action')
    return (
        <div id="container">
            <ReactHighmaps config={this.mapConfig} ref="chart" />
            <Buttons style="success" classN="btn btn-secondary" text="test" onButtonClick={()=> this.props.showPoints( )} />

        </div>
    )
}

}

function mapStateToProps(state){
  return {
    mapConfig: state.mapConfig  }
};

error:

ReactHighmaps.src.js:1538 Uncaught Error: Config must be specified for the HighchartsMap component
at Object.renderChart (ReactHighmaps.src.js:1538)
at Object.componentDidMount (ReactHighmaps.src.js:1571)
at Object.chainedFunction [as componentDidMount] (ReactHighmaps.src.js:1181)
at commitLifeCycles (react-dom.development.js:8778)
at commitAllLifeCycles (react-dom.development.js:9938)
at HTMLUnknownElement.callCallback (react-dom.development.js:540)
at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
at invokeGuardedCallback (react-dom.development.js:436)
at commitRoot (react-dom.development.js:10042)
at performWorkOnRoot (react-dom.development.js:10966)
at performWork (react-dom.development.js:10916)
at requestWork (react-dom.development.js:10832)
at scheduleWorkImpl (react-dom.development.js:10715)
at scheduleWork (react-dom.development.js:10677)
at scheduleTopLevelUpdate (react-dom.development.js:11140)
at Object.updateContainer (react-dom.development.js:11178)
at react-dom.development.js:15190
at Object.unbatchedUpdates (react-dom.development.js:11049)
at renderSubtreeIntoContainer (react-dom.development.js:15189)
at Object.render (react-dom.development.js:15254)
at Object../src/index.js (index.js:13)
at __webpack_require__ (bootstrap 64aa9ab7ac8df7b9e8db:669)
at fn (bootstrap 64aa9ab7ac8df7b9e8db:87)
at Object.0 (index.css?ce69:26)
at __webpack_require__ (bootstrap 64aa9ab7ac8df7b9e8db:669)
at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 64aa9ab7ac8df7b9e8db:715)
at bundle.js:719

2:

<ReactHighmaps config={this.props.mapConfig} ref="chart" />

error: Highmaps box is there with title and logo at bottom but no chart showing

3:

<ReactHighmaps config={this.props.state.mapConfig} ref="chart" />

error:

Uncaught TypeError: Cannot read property 'mapConfig' of undefined
at Test.render (map_container.js:21)
at finishClassComponent (react-dom.development.js:7882)
at updateClassComponent (react-dom.development.js:7859)
at beginWork (react-dom.development.js:8233)
at performUnitOfWork (react-dom.development.js:10215)
at workLoop (react-dom.development.js:10279)
at HTMLUnknownElement.callCallback (react-dom.development.js:540)
at Object.invokeGuardedCallbackDev (react-dom.development.js:579)
at invokeGuardedCallback (react-dom.development.js:436)
at renderRoot (react-dom.development.js:10357)
at performWorkOnRoot (react-dom.development.js:10963)
at performWork (react-dom.development.js:10916)
at requestWork (react-dom.development.js:10832)
at scheduleWorkImpl (react-dom.development.js:10715)
at scheduleWork (react-dom.development.js:10677)
at scheduleTopLevelUpdate (react-dom.development.js:11140)
at Object.updateContainer (react-dom.development.js:11178)
at react-dom.development.js:15190
at Object.unbatchedUpdates (react-dom.development.js:11049)
at renderSubtreeIntoContainer (react-dom.development.js:15189)
at Object.render (react-dom.development.js:15254)
at Object../src/index.js (index.js:13)
at __webpack_require__ (bootstrap 87cb00105f31648d28ed:669)
at fn (bootstrap 87cb00105f31648d28ed:87)
at Object.0 (index.css?ce69:26)
at __webpack_require__ (bootstrap 87cb00105f31648d28ed:669)
at ./node_modules/ansi-regex/index.js.module.exports (bootstrap 87cb00105f31648d28ed:715)
at bundle.js:719

Github Repo

The correct way to pass the prop is like this: `config={this.props.mapConfig}`. You said the chart isn't showing when you do that. Pass the props correctly first and then you can figure out why the chart isn't showing — JJJ, Nov 30 '17 at 17:40
Because it led to the issue I figured I would try other ways in case I had it wrong. Changed to the correct syntax, so thank you Josan. — mandajoan, Nov 30 '17 at 17:54
@JosanIracheta any suggestions on where to start to figure out why the chart isn't showing are welcomed.. I am new to the redux & highcharts game — mandajoan, Nov 30 '17 at 17:57
The key code relevant to this question was placed in a GitHub repo, and the links now return a 404 error. So the value of this question is now greatly reduced, and that is why I am down-voting. OP got what they needed, but the real purpose of Stack Overflow is to help everyone, not just OP. — jalynn2, Jan 31 '18 at 15:34
@jalynn2 This project is for a client and has progressed to the point of needing a private repo on github. Any person needing help would be welcome to comment or message for assistance, and considering the relevant code is included in both the post and in the accepted answer I believe this is still a helpful post. — mandajoan, Feb 01 '18 at 00:10

Bartek Fryzowicz · Accepted Answer · 2017-11-30T18:07:13.520

3

In addition to what @JosanIracheta has noticed in comment there is also a problem in PointsMapConfig reducer. SHOW_POINTS action overrides mapConfig property instead of extending it. So please try this:

const PointsMapConfig = (state = initialState, action) => {
  switch (action.type){
    case SHOW_POINTS:
      return {
        ...state,
        mapConfig:  {
          ...state.mapConfig,
          series: [
              ...state.mapConfig.series.filter((el, index) => index !== 2), {
              ...state.mapConfig.series[2],
              visible: true
            }
          ]
        }
      }
    default:
      return state;
  }
}

Next problem is in mapStateToProps. To access state property you have to use name of key at which reducer was mounted so please use this:

function mapStateToProps(state){
  return {
    mapConfig: state.mapConfig.mapConfig 
  };
};

edited Nov 30 '17 at 18:07

answered Nov 30 '17 at 17:45

Bartek Fryzowicz

6,464
18
27

I tried this and the chart container renders but there is no map. Same issue as I originally had with the syntax of this.props.mapConfig being passed into the config. Any thoughts? – mandajoan Nov 30 '17 at 17:56
1

Yes, answer updated. Next problem was in `mapStateToProps` – Bartek Fryzowicz Nov 30 '17 at 18:00
That was it! Thank you! – mandajoan Nov 30 '17 at 18:03

Redux React Highcharts (Highmaps) issue passing map config from app state

1 Answers1