Forum Discussion
SPFX web part to add Text and show it inside a Popup when clicking on a button
You need to pass the text to display variable (which looks like the description property in the property panel) into the MyPortal React element. It is already being passed into the ReactPortal React component as part of the IReactPortalProps object, so you just need to pass that through to MyPortal as an attribute.
First, change line 4 in MyPortal.tsx to
const Myportal = (textToDisplay: string) => {To use the parameter, place it in the return object. It looks like you want to replace line 49 in MyPortal.tsx with
{textToDisplay}To pass the description property into MyPortal, replace line 8 in ReactPortal.tsx with
<Myportal textToDisplay={props.description}/>I hope this help show how to pass properties into React function components. If this helps, please consider marking this as the approved solution.
Good luck,
Don Kirkham
You need to pass the text to display variable (which looks like the description property in the property panel) into the MyPortal React element. It is already being passed into the ReactPortal React component as part of the IReactPortalProps object, so you just need to pass that through to MyPortal as an attribute.
First, change line 4 in MyPortal.tsx to
const Myportal = (textToDisplay: string) => {
To use the parameter, place it in the return object. It looks like you want to replace line 49 in MyPortal.tsx with
{textToDisplay}
To pass the description property into MyPortal, replace line 8 in ReactPortal.tsx with
<Myportal textToDisplay={props.description}/>
I hope this help show how to pass properties into React function components. If this helps, please consider marking this as the approved solution.
Good luck,
Don Kirkham
Don Kirkhamok thanks a lot for the help.. but how i can show the Description field as Multi-line of text that accept HTML code? or if i can render it as Rich Text Editor? as i need the text inside the Popup to be rich text rather than been just a text-only.. can i achieve this?
- This can be done, but it is well beyond the scope of your original question.
I recommend that you look at the samples available in Microsoft PnP. There is a Rich Text control that could display your text, but editing it in a popup is not easy. There is not a Rich Text Property Pane control, but it is possible to create a custom control with a popup that has the Rich Text control in it, for editing.
PnP is a great source for all kinds of samples and code to shortcut the developer experience, so I recommend going through as much of it as you can. (Including a lot of instructional videos.)
Best of luck,
Don
