I've been working on a CSS toggle for a div with className toggling. My approach involves using redux to manage the boolean state. Using the redux chrome extension, I can see that the state is indeed changing but the div remains invisible. If you have any insights or suggestions on what might be causing this issue, I'd appreciate your input.
Component:
const ShowHideDiv = (props) => (
<div>
<Button onClick={props.toggleDiv} />
<div className={props.hidden ? style.hidden : style.open}>
<TextInput />
</div>
</div>
);
function mapDispatchToProps(dispatch) {
return {
toggleDiv: () => dispatch(toggleDiv()),
};
}
export default connect(null, mapDispatchToProps)(ShowHideDiv);
actions.js:
const toggleDiv = () => {
return {
type: 'TOGGLE_DIV',
};
};
reducers.js
const toggleDivReducer = (state = { hidden: true}, action) => {
switch(action.type) {
case 'TOGGLE_DIV':
return Object.assign({}, state, {hidden: !state.hidden});
default:
return state;
}
};
style.scss
.hidden {
display: none;
}
.open {
display: inline;
}
Display page
<ShowHideDiv hidden={props.hidden} />
function mapStateToProps({demo}) {
return {
hidden: demo.hidden,
};
}