Comment by terhechte | Hacker News Reader

Comment by terhechte | Hacker News Reader

Parent Full thread

I'm currently using React with ClojureScript/Om and I really like working with it. However I'm never really sure how to model non-persistent ui changes. I.e. a user clicks a button that sets the display property of the target note to "block" so that more content is visible. I wouldn't want to keep this in the main store. So I'm pondering whether to store this in component local state and have the change appear with a React rerender, or whether it is fine to simply access the DOM and set a different style property? (i.e. getElementById...)

You shouldn't be accessing the DOM unless you absolutely need it (e.g. get clientHeight on a node). Use state instead:

   _handleClick: function() {
     this.setState({expanded: true});
   },
 
   render: function() {
     return (
       <div className={this.state.expanded ? 'expanded' : 'compact'}>
         <button onClick={this._handleClick} />
       </div>
     );
   }

No! Never access the DOM directly if you can help it. I forgot to mention, display things like you said are one of the only places we really use local state. A dropdown for instance, might have a state called "isOpen". In your click handler, you'd call this.setState({isOpen: true}), and in render, you'd only render the dropdown if isOpen is true.

Thanks, totally makes sense now that I think about it. I just removed the offending code and set up a proper local state for it.

Reply on news.ycombinator.com