Questions And Answers

More Tutorials

React Component states Dynamic user interface

Suppose we want to have the following behaviour - We have a heading (say h3 element) and on clicking it, we want it to become an input box so that we can modify heading name. React makes this highly simple and intuitive using component states and if else statements. (Code explanation below)

// I have used ReactBootstrap elements. But the code works with regular html elements also
var Button = ReactBootstrap.Button;
var Form = ReactBootstrap.Form;
var FormGroup = ReactBootstrap.FormGroup;
var FormControl = ReactBootstrap.FormControl;
var Comment = reactCreateClass({
 getInitialState: function() {
 return {show: false, newTitle: ''};
 handleTitleSubmit: function() {
 //code to handle input box submit - for example, issue an ajax request to change name in
 handleTitleChange: function(e) {
 //code to change the name in form input box. newTitle is initialized as empty string. We need to
update it with the string currently entered by user in the form
 changeComponent: function() {
 // this toggles the show variable which is used for dynamic UI
 this.setState({show: !};
 render: function() {
 var clickableTitle;
 if( {
 clickableTitle = <Form inline onSubmit={this.handleTitleSubmit}>
 <FormGroup controlId="formInlineTitle">
 <FormControl type="text" onChange={this.handleTitleChange}>
 } else {
 clickabletitle = <div>
 <Button bsStyle="link" onClick={this.changeComponent}>
 <h3> Default Text </h3>
 return (
 <div className="comment">
 <Comment />, document.getElementById('content')

The main part of the code is the clickableTitle variable. Based on the state variable show, it can be either be a Form element or a Button element. React allows nesting of components.

So we can add a {clickableTitle} element in the render function. It looks for the clickableTitle variable. Based on the value '', it displays the corresponding element.


In this page (written and validated by ) you learned about React Component states Dynamic user interface . What's Next? If you are interested in completing React tutorial, your next topic will be learning about: React Variations of Stateless Functional Components.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.