This component toggle the state to true and false on each click.
const mapStateToProps = state => {
return {
branding:state.brand
}
}
const mapDispatchToProps = {
clickEvent:toggleState
}
class Files extends React.Component {
constructor(props) {
super (props)
this.state = {
brand: false,
}
}
render(){
return (
<div className="bodywrapper">
<div className="projectcontainer">
<div className="textcontainer">
<div className="textheader">Files you have</div>
</div>
<div className="bodycontainer">
<button
className="filebutton"
onClick = {this.props.clickEvent}
name = "brand">
Brand Guide
{this.props.branding && <div className="tickicon">O</div>}
</button>
<div className="filebutton"> Content</div>
</div>
<div className="buttoncontainer">
<div className="bottontext"><a href="filesneeded.html">Next step</a> </div>
</div>
</div>
<div className="sliderwrapper">
<div className="slide"></div>
<div className="slide"></div>
<div className="slide"></div>
<div className="slide"></div>
<div className="slide"></div>
</div>
</div>
)
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Files)
Here I used Redux for accessing the state globally. MapDispatchToProps trigger the action of toggleState.
import { TOGGLE } from '../Redux/constants.js'
export const toggleState =()=> ({
type:TOGGLE,
})
And reducer return the opposite of state on each click
import { TOGGLE } from '../Redux/constants'
const initialState = {
brand:false
}
export const toggleStater = (state = initialState,action = {}) => {
switch (action.type) {
case TOGGLE:
return !state
break;
default:
return state
break;
}
}
and i access that state from Redux store using the MSTP like this.props.branding
. And change the ui using this code.{this.props.branding && <div className="tickicon">O</div>}
Unfortunately this code is note working. someone please share the mistake.
Your reducer doesn't seem to be valid, (state
is an object so return !state
will not work) you should write :
export const toggleStater = (state = initialState,action = {}) => {
switch (action.type) {
case TOGGLE:
return {
...state,
brand: !state.brand
}
default:
return state
}
}
you can also remove the state declaration from your component : this.state = {brand: false,}
is useless