Dynamic className in cjsx

Question

I am trying to hide a component and update the image in a button when I click said button. I have managed to hide the component by doing the follow:

{<MyAwesomeComponent /> unless @state.hide}

And I change the state by doing:

toggleComponent = ->
  @setState
    hide: !@state.hide

. . . 

<div 
  onClick={@toggleComponent}>
  <img 
    src="img/interface/icon-chevron-left.png"
    className={if @hide then "hidden"}/>
</div>

Unfortunatelly the {if @hide then "hidden"} doesn't seem to work. Any ideas on how to do this?

Answer 1

The hide property is set on @state, not on the component instance.

if @state.hide then "hidden"