reactjs - Is this good practice store state in variable? -

i have started study reactjs , have questions. reading documentation here, can't find answer looking for. here example:

var awesome = react.createclass({   getinitialstate:function() {     return {       txt : ["1","2","3","4","5"],       istrue : true     }   },    handleclick:function() {     this.setstate({       istrue : !this.state.istrue     })   },    render:function() {     var changestyle = {       display: this.state.istrue ? "block" : "none"     };      var message = this.state.txt.map(function(onemessage) {       return  <subchild change={changestyle} txt={onemessage}/>     });      return (       <div>         <button onclick={this.handleclick} >click me</button>         {message}       </div>       )   } })  var subchild = react.createclass({   render:function() {     return (       <div style={this.props.change}>         <h3>{this.props.txt}</h3>       </div>       )   } })  react.render(<awesome />, document.body) 

everything works fine, have questions. can see i store state inside variable. best practice? how can achieve same result without variables inside render function or without states (i trying avoid state). is possible? here fiddle

why state variables?

the idea of using state variables have changing / dynamic data, ie if component changing, should defined state variable in component user interaction can result in change of variable , change in variable causes effected component re-render.

use of properties

if value changed each instance of component , uneffected user interaction or component state change, should defined property can assigned once @ instantiation.

in cases, cannot avoid use of variables inside render