Displaying Dynamic placeholder content on Textbox in ReactJS

January 26, 2021, at 06:10 AM

I wanted to place a dynamic content in placeholder inside my textbox component in React. I have declared a function which returns the placeholder, passing the value as argument. I am hardcoding the args here in the below code for clarity perspective. I am always getting an empty parameter in my function. If someone could let me know what i am doing wrong here.

Here is my Input Component

<SocialInput 
   value={data.name}
   onChange={onChangeInput}
   error={validationError}
   placeholder={ () => { CustomPlaceholder("facebook") }}  
/>

Function which return placeholder.

const CustomPlaceholder = (name) => {
        let placeholderContent;
        switch(name) {
            case "facebook": 
                placeholderContent = "https://www.facebook.com/your-username";
                return placeholderContent;
            case "email":
                placeholderContent = "example@domain.com";
                return placeholderContent;
            case "instagram":
                placeholderContent = "https://www.instagram.com/your-username"
                return placeholderContent;
            case "linkedin":
                placeholderContent = "https://www.linkedin.com/your-username";
                return placeholderContent;
            case "pinterest":
                placeholderContent = "https://www.pinterest.com/your-username";
                return placeholderContent;
            case "skype":
                placeholderContent = "https://skype/your-username";
                return placeholderContent;
            case "twitter":
                placeholderContent = "https://twitter.com/your-username";
                return placeholderContent;
            case "whatsapp":
                placeholderContent = "(Country-code)-Mobile number";
                return placeholderContent;
            case "youtube":
                placeholderContent = "https://www.youtube.com/channel/Channel link";
                return placeholderContent;
            case "blog":
                placeholderContent = "domain.com";
                return placeholderContent;
            case "other":
                placeholderContent = "Social URL";
                return placeholderContent;
                default: "Social URL";
        }
    }

And finally my input textbox. Here i am getting function as placeholder props:

<input 
   type="text"
   onChange={onChange}
   value={value}
   className="social-input"
   placeholder={placeholder}
   onBlur={(e) => e.target.placeholder = placeholder}
   onFocus={(e) => e.target.placeholder = ""}
 />

Answer 1

Here placeholder={ () => { CustomPlaceholder("facebook") }} it call the function but returns undefined, make it return the value:placeholder={() => CustomPlaceholder("facebook")},

and in your component call the received function: placeholder={placeholder()} because it's a function

or you can leave your component as it is and pass the generated placeholder string instead: placeholder={CustomPlaceholder("facebook")}