Warning: session_start(): open(/tmp/sess_9315e9ab3165a204b24ea9512e441de1, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How to set a placeholder on an Input field in React - LearnShareIT

How to set a placeholder on an Input field in React

This article will show you how to set a placeholder on an input field in React, like using the inline placeholder property or using the useRef() hook.

Set a placeholder on an Input field in React

The placeholder attribute is new in HTML5 for input tags. The placeholder provides more information to the user, helping them know what data to enter or any message they want.

Supported by most browsers, including Internet Explorer 10, Firefox, Opera, Chrome, and Safari. Note that IE 9 and earlier versions are not supported. This attribute makes the input cells more user-friendly. They can know what to fill in the field.

Using the inline placeholder property 

This way, we will write the inline placeholder attribute in the input tag and set the text value for it in React like the code below.

Code:

import React, { useState } from "react";

const App = () => {
    const [email, setEmail] = useState("");

    const handleOnChange = (e) => {
        setEmail(e.target.value);
    };

    return (
        <div>
            <h2>Enter Message :</h2>
            <input
                value={email}
                onChange={handleOnChange}
                placeholder="abc@gmail.com"
            />
        </div>
    );
};

export default App;

Output:

By writing the inline placeholder property in the input tag that we need to set a placeholder on an input field, you can easily change its value by assigning the property to a string. Like the example code above, we replace it with the value “abc@gmail.com” so that the user can know what they should enter in the input box.

Using the useRef() hook method

When you add useRef() on the input, we get a ref that can access all input values. We can also set the value of the placeholder by accessing the word ref, like in the following example.

Code:

import React, { useEffect, useRef, useState } from "react";

const App = () => {
    const [email, setEmail] = useState("");
    const ref = useRef(null);

    const handleOnChange = (e) => {
        setEmail(e.target.value);
    };

    useEffect(() => {
        ref.current.attributes.placeholder.nodeValue = "abc@gmail.com";
    }, []);

    return (
        <div>
            <h2>Enter Message :</h2>
            <input ref={ref} value={email} onChange={handleOnChange} placeholder="" />
        </div>
    );
};

export default App;

This approach returns the same output as using the inline placeholder. However, in this way, we also need to put an empty placeholder in the input tag to be set to access this value and fix it with ref. Using the “ref.current.attributes.placeholder.nodeValue” path, you can access the placeholder’s string value and edit it to your liking.

Summary

The article has told you two ways to set a placeholder on an input field in React. Using the inline placeholder property method is more recommended to me because it’s a built-in property to do this.

Leave a Reply

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