Skip to content

Instantly share code, notes, and snippets.

@maisnamraju
Created March 26, 2015 16:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maisnamraju/552fe574fbf6bf9c13ad to your computer and use it in GitHub Desktop.
Save maisnamraju/552fe574fbf6bf9c13ad to your computer and use it in GitHub Desktop.
setting state of component in reactjs
var renderTabsContent = function(content){
if(typeof content === 'object') {
return(
<span dangerouslySetInnerHTML={{__html: content.text }} />
);
} else if (typeof content === 'string'){
var text = content;
var language = editorContent.language;
var code = editorContent.content;
return(<div className="tab-inner-content ">
<CodeEditor value={code} mode={language} height="400px" width="350px" />
</div>
);
}
}
var CodeEditor = React.createClass({
getInitialState: function() {
return {language: 'javascript'};
},
changeLanguage: function() {
var language = document.getElementById('lang-select');
language = language.options[language.selectedIndex].value;
this.setState({
language: language
});
},
render: function() {
return(
<div id="code-editor">
<div className="col-xs-6">
<h5>Change Language </h5>
<select id="lang-select" className="form-control" onChange={this.changeLanguage}>
<option value="javascript" >Javascript</option>
<option value="java">Java</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="xml">XML</option>
<option value="ruby">Ruby</option>
<option value="sass">SASS</option>
<option value="markdown">Mark Down</option>
<option value="mysql">Mysql</option>
<option value="json">JSON</option>
<option value="html">HTML</option>
<option value="handlebars">Handlebars</option>
<option value="golang">Go</option>
<option value="csharp">C#</option>
<option value="coffee">Coffee Script</option>
<option value="css">CSS</option>
</select>
</div>
<AceEditor mode={this.state.language} value={this.props.value} theme="monokai" height="400px" width="900px" id="react-editor" />
</div>
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment