Displaying Dynamic placeholder content on Textbox in ReactJS

80
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")}

READ ALSO
Extracting Parameters from Redirect URI - QuickBooks API / Python

Extracting Parameters from Redirect URI - QuickBooks API / Python

I'm working on the authentication component of an app that calls the quickbooks online reporting APIIntuit has an authentication package, intuit-oauth, which I'm using to generate the authorization URL

85
How to check if a function is running in worker thread in node?

How to check if a function is running in worker thread in node?

I am trying to use worker_threads in node to run some expensive calculation without blocking the main thread

86
PyQt5 - setting background color and background image

PyQt5 - setting background color and background image

I wonder how do I set background color AND background image in Python GUI app using PyQt5I can't figure out how to set them simultaneously

104
How to take column from two table in whereExists clause in laravel 5.5

How to take column from two table in whereExists clause in laravel 5.5

I have three table 1)allcasefileofuserrequest 2)allscanfileofuserrequest 3)userrequestforcasecopies

84