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 = ""}
/>
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")}
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
I am trying to use worker_threads in node to run some expensive calculation without blocking the main thread
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
I have three table 1)allcasefileofuserrequest 2)allscanfileofuserrequest 3)userrequestforcasecopies