Categories: JavascriptWeb

ReactJS – Controlled Component Code Example

This article represents code sample for ReactJS UI controlled components along with related details. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.
The code sample represents an input field consisting of “Calvin”. Once you change the text, the “calvin” written with “Hello” would also change. Following are the key points described later in this article:
  • What are controlled components?
  • Code Example – Controlled Component
What are Controlled Component?

As per the ReactJS Form page, An <input> with “value” set is a controlled component. In a controlled <input>, the value of the rendered element will always reflect the value prop.

In the example below, the textfield consists of “value” attribute which is assigned to “this.state.value”. Following code represents the controlled component:

<input type="text" value={this.state.value} onChange={this.handleChange}/>
Code Example – Controlled Component

The code below represents following:

  • The controlled UI component, namely, <input> field with value set.
  • “onChange” event handler with a callback method “handleChange” which is invoked as the text in input field changes
  • “setState” function which is invoked from handleChange method, thereby setting the value of “value” field to changed value
  • “getInitialState” function setting the initial value of “value”

Changing text inside the text field will change the text ahead of “Hello”. Following screenshot represents the UI.

Following is the code sample:

<!DOCTYPE html>
<html>
<head>
<title>Hello ReactJS!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body class="container">
<div id="content"></div>
<script type="text/jsx"> 
 var HelloUI = React.createClass({
  getInitialState: function(){
   return {value: 'Calvin'};
  },
  handleChange: function(event) {
   this.setState({value: event.target.value});
  },
  render: function(){
   return(    
    <div>
    <h1>Hello, {this.state.value}</h1>
    <hr/>       
    <input type="text" value={this.state.value} onChange={this.handleChange}/>          
    </div>
    );
  }
 }); 
 React.render(<HelloUI />, document.getElementById("content"))
</script>
</body>
</html>
Hope the article was helpful in presenting concepts and code samples related with UI Controlled Component in ReactJS.
Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

1 month ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

2 months ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

2 months ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

2 months ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

2 months ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

2 months ago