ReactJS - Forms

In this chapter we will explain how to use forms in React.

Simple Example

In example below we are setting input form with value = {this.state.data}. This allow us to update state whenever input value changes. We are using onChange event that will watch input changes and update state accordingly.

App.jsx

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);
  
      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState(e) {
      this.setState({data: e.target.value});
   }

   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

When input text value change, the state will update.

Complex Example

In this example we will show you how to use forms from child component. onChange method will trigger state update that will be passed to the child input value and rendered on screen. The similar example was shown in our events tutorial. Whenever you need to update state from child component you need to pass function that will handle updating (updateState) as a prop (updateStateProp).

App.jsx

import React from 'react';

class App extends React.Component {

   constructor(props) {
      super(props);
  
      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);
   };

   updateState(e) {
      this.setState({data: e.target.value});
   }

   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}

class Content extends React.Component {

   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp} 
               onChange = {this.props.updateStateProp} />
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

This will produce following result: