React Textbox onChange Example | React Text Input

Hello Devs,

In this tutorial, we are going to learn about react textbox onchange example.

Given below is the example code and the output:

Example Code:

import React, { Component } from 'react';
import { render } from 'react-dom';
   
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'Rathorji'
    };
   
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleChange(event) {
    this.setState({name: event.target.value});
  }
  
  handleSubmit(event) {
    console.log(this.state);
    event.preventDefault();
  }
  
  render() {
    return (
      <div>
        <h1>React Textbox onChange Example - Rathorji.in</h1>
        <form onSubmit={this.handleSubmit}>
          <input 
              type="text"
              value={this.state.name} 
              onChange={this.handleChange} />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

Output:

{name: "Rathorji ss"}

I hope this example helps you.