How is the background colour of the last clicked on element changed?

[storybook-eol]

How is the background colour of the last clicked on element changed?

[alexcurtis]

Hi. Could I please see your style object for node? There should be a object in there called activeLink and that sets the backgroundColor.

[gbmhunter]

Here it is:

I know this style variable is being loaded in correctly as other parameters do have an effect.

[alexcurtis]

activeLink requires the props props.node.active to be set. Could you set a breakpoint in components/header.js line 15. When you click a node please can you see if that is being set to true and re-rendered.

[gbmhunter]

this.props.node.active seems to be undefined.

This is caught after clicking on a node. It caught two passes through this part of code after clicking, and both where undefined.

[alexcurtis]

Are you setting node.active in the onToggle handler, like in example/app.js? Nodes do not control this within their own state, its purely data driven from the top level.

[gbmhunter]

Ahhh, I think you have hinted towards the issue. I am setting node.active, but I switched the data source from the example data variable to a data source within my application state variable (I'm using the Redux framework if you are familiar with that?). Hence I'm updating the wrong data set. I'm surprised the open/close toggling of nodes still works...

Anyway, I know what I have to do now, create some actions which are dispatched inside those event handlers which modify the internal state in Redux, and it should then update fine. Thanks!

[alexcurtis]

@gbmhunter Cool! I'm Pleased we could get to the bottom of it. I was trying to make it more react-ish by removing state within sub-components and having it purely driven by top level data. It makes it slightly more complicated for small apps, but so much better for larger ones.