Update javascript variable on html after event- Reactjs -

i working on jsx , have following issue

js

var results =""; results = value changes; 

html

<div classname="content" dangerouslysetinnerhtml={{__html: results}}></div> 

i have variable results changes when button pressed. value "" , after event becomes string. want display new string every time button pressed. suggestions?

you should add variable state of component. firstly, add

getinitialstate() {   return { value : "initialvalue" }; } 

or if using ecma6,

constructor(props) {   super(props);   this.state = { value : "initialvalue" }; } 

when want change it, call

this.setstate({ value : "newvalue" }); 

and on render method, use:

render() {   return <div classname="content" dangerouslysetinnerhtml={{__html: this.state.value}} />; } 

or that. when state changes, react redraw it, calling render again.

btw, should avoid dangerouslysetinnerhtml if possible. if want, can comment more doing see if there alternatives.

if value not contain html, instance, should use:

render() {   return <div classname="content">{this.state.value}</div>; } 

which nicer , safer :)