Show/Hide div with CSS in React JS/Redux
<p>I am attempting to toggle a div using CSS and <code>className</code>s.  I am using redux to update the state of the boolean. I can confirm through the redux chrome extension that the state <em>is</em> changing but the div does not show up. If anyone has any ideas as to what is wrong, please let me know.</p>

<p>Component:</p>

<pre><code>const ShowHideDiv = (props) =&gt; (
  &lt;div&gt;
    &lt;Button onClick={props.toggleDiv} /&gt;
    &lt;div className={props.hidden ? style.hidden : style.open}&gt;
      &lt;TextInput /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
);

function mapDispatchToProps(dispatch) {
  return {
    toggleDiv: () =&gt; dispatch(toggleDiv()),
  };
}

export default connect(null, mapDispatchToProps)(ShowHideDiv);
</code></pre>

<p>actions.js:</p>

<pre><code>const toggleDiv = () =&gt; {
  return {
    type: 'TOGGLE_DIV',
  };
};
</code></pre>

<p>reducers.js</p>

<pre><code>const toggleDivReducer = (state = { hidden: true}, action) =&gt; {
  switch(action.type) {
    case 'TOGGLE_DIV':
      return Object.assign({}, state, {hidden: !state.hidden});
    default:
      return state;
  }
};
</code></pre>

<p>style.scss</p>

<pre><code>.hidden {
  display: none;
}

.open {
  display: inline;
}
</code></pre>

<p>Display page</p>

<pre><code>&lt;ShowHideDiv hidden={props.hidden} /&gt;

function mapStateToProps({demo}) {
  return {
    hidden: demo.hidden,
  };
}
</code></pre>