Taking input from an input field in React

In this tutorial, we will make a simple web page that will contain an input field. Whenever there is a change in the input field, it will display the text in pretty form.

First, let’s create a react app to start on

Write the following command in terminal:

create-react-app tutorial_2
cd ./tutorial_2/src && ls -l

Next, we create two new files PrettyInput.js and PrettyInput.css :

touch PrettyInput.js PrettyInput.css

Now edit your index.js file as follows:


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Pretty from './PrettyInput';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Pretty />, 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();

In the above code, we are just importing our PrettyInput.js file.

Next, let’s write our Pretty class. Open up PrettyInput.js file in your favorite editor and write following code:


import React from 'react';
import './PrettyInput.css';


class Pretty extends React.Component
{
    constructor(props) {
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this)
        this.state = { textAreaValue:"bloggerdrive"};
    }

    handleInputChange(e)
    {
        this.setState({ textAreaValue:e.target.value});
    }

    render() {
        return (
            <div className="Pretty">
            <body>
                <h3>Input</h3>
                <label> Enter text here: </label>
                <p>
                <input type="text"  onChange = {this.handleInputChange}
                    defaultValue = {this.state.textAreaValue}
                />
                </p>
                <h3>Output</h3>
                <div className="Pretty-Output">
                <p>
                    {this.state.textAreaValue}
                </p>
                </div>
            </body>
            </div>
        );
    }
}

Let’s look at the code line by line.

class Pretty extends React.Component

First, we create class Pretty that extends React. Component to access function defined on the prototype object of the Component constructor.


    constructor(props) {
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this)
        this.state = { textAreaValue:"bloggerdrive"};
    }

Next, we create a constructor for our component.

  • First, we call super(props) so that we can use this in the constructor.
  • Next, we bind our handleInputChange function bypassing this as argument.
  • Then we define our state which contains a dictionary with key textAreaValue
    handleInputChange(e)
    {
        this.setState({ textAreaValue:e.target.value});
    }

Then we write our handleInputChange the method which simply changes the value of our state by calling setState function whenever there is a change in the input field.

That’s it!!. Now, all we have to do is render our HTML component using JSX. Which is what we have done.

To prettify the output, I have written the following CSS which is inspired by Dronca Raul:-

.Pretty{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family:  monospace;
}
body{
    text-align: center;
}

input[type=text]
{
    height: 28px;
    width: 100%;
    border-radius: 5px;
    transition: border-color .5s ease-out;
    text-decoration: none;
}

.Pretty-Output {
  position: relative;
  letter-spacing: 6px;
  font-size: 3vw;
  font-weight: 600;
  text-decoration: none;
  color: white;
  display: inline-block;
  background-size: 120% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  -ms-background-clip: text;
  -ms-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  background-image: linear-gradient(45deg, 
                    #7794ff, 
                    #44107A,
                    #FF1361,
                    #FFFDDD);
  animation: .8s shake infinite alternate;
}

@keyframes shake {
  0% { transform: skewX(-15deg); }
  5% { transform: skewX(15deg); }
  10% { transform: skewX(-15deg); }
  15% { transform: skewX(15deg); }
  20% { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }  
}

Once this is done, run the server by typing:

npm start

You will see the following Output:

output1

Now try writing on the input field, it will change as you start typing.

Sharing is caring!

1 thought on “Taking input from an input field in React”

  1. waterfallmagazine.com

    https://waterfallmagazine.com
    Hi there just wanted to give you a quick heads up and let you
    know a few of the pictures aren’t loading correctly.
    I’m not sure why but I think its a linking issue.
    I’ve tried it in two different browsers and both show the same outcome.

Leave a Comment

Your email address will not be published. Required fields are marked *

shares
Scroll to Top