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="[email protected]"
            />
        </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 “[email protected]” 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 = "[email protected]";
    }, []);

    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.

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs