Golang React JS Technology Blog

Working with Forms, Inputs and onChange Events in ReactJs

This is an example, to show working model of React with form elements, using state properties to set their value and event handlers to respond to user interactions.

Create React App

Let's create an example project for this tutorial. Navigate to a convenient location and open a new command prompt and run the below command to create a new react app.

npx create-react-app demo

Now, go to the project folder:

cd demo

Install Dependencies for this Project

Add the Bootstrap package and a validation package to the project.

npm install --save bootstrap-4-react

To insert the Bootstrap CSS stylesheet in the application, update default index.js file with below code snippet.

src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
 
ReactDOM.render(<App />, document.getElementById('root'));
 
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
 

Add a new file Insert.js with below code snippet.

src\components\Insert.js

import React, { Component } from 'react';
 
class Insert extends Component {
  constructor(props) {
    super(props);
    this.state = {
        name: "",
        city: ""
    }
  }
 
  userFormValue = (event) => {
      this.setState({ [event.target.name]: event.target.value },
          () => this.props.submit(this.state));
  }
 
  render() {
  return <div className="div bg-primary text-white p-1">
            <div className="form-group">
              <label>Name</label>
              <input className="form-control"
                     name="name"
                     value={ this.state.name }
                     onChange={ this.userFormValue } />
              <label>City</label>
              <input className="form-control"
                     name="city"
                     value={ this.state.city }
                     onChange={ this.userFormValue } />
            </div>
          </div>
  }
}
 
export default Insert;

The input element's value attribute is set using the name and city state property, and changes are handled using the userFormValue method, which has been selected using the onChange prop. The callback option provided by the setState method to invoke the submit function prop after the state data, which allows to send the form data to the parent component. Any change in the state data of the Insert component getting pushed to the App component so that it can be finally display by the Show component, hence as user starts typing into the input element it is immediately reflected in the content presented to the user.

Add a new file Show.js with below code snippet.

src\components\Show.js

import React, { Component } from 'react';
 
class Show extends Component {
  userInfo = (data) => Array.isArray(data) ? data.join(", ") : data.toString();
 
  render() {
    let keys = Object.keys(this.props.data);
    if (keys.length === 0)
    {
      return <div className="div bg-primary text-white p-1"> --- </div>
    }
    else
    {
      return <div className="div bg-primary text-white p-1">
            { keys.map(key =>
                <div key={key} className="row h5 text-white">
                    <div className="col">{ key }:</div>
                    <div className="col">
                        { this.userInfo(this.props.data[key]) }
                    </div>
                </div>
            )}
        </div>
    }
  }
}
 
export default Show;

Now update the content of App.js with below code changes:

src\App.js

import React, { Component } from 'react';
import Insert from './components/Insert';
import Show from './components/Show';
 
class App extends Component {
  constructor(props) {
        super(props);
        this.state = {
            formData: {}
        }
    }
    submitData = (newData) => {
        this.setState({ formData: newData});
    }
    render() {
        return <div className="container-fluid">
            <div className="row">
                <div className="col-12">
                    <Insert submit={ this.submitData } />
                </div>
                <div className="col-12">
                    <Show data={ this.state.formData } />
                </div>
            </div>
        </div>
    }
}
 
export default App;

Now launch the application

npm start

This will developed a static website on web server on port 3000 on your machine. This also launch your browser navigating to http://localhost:3000.

Running the example application:

Most Helpful This Week
How to pass an Argument to a Method used inside JSX expression? 3 Different Examples - How State Works in React? React JS get Tag Name and Inner Text on Click Check which Radio button is Selected or Clicked Check checkbox is Checked or Unchecked React JS update Div content on click