Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Placeholder control documentation sample code

See original GitHub issue

Question

Please specify what version of the library you are using: [ 1.14.0 ]

Observed Behavior

Documentation at below link says to use below code to put placeholder control https://sharepoint.github.io/sp-dev-fx-controls-react/controls/Placeholder/

<Placeholder iconName='Edit' iconText='Configure your web part' description='Please configure the web part.' buttonLabel='Configure' onConfigure={this._onConfigure} />

But if we put like above, ’ this.props’ is coming as undefined, as ‘this’ is referring to placeholder control itself. To make it work I had to use like below

<Placeholder iconName='Edit' iconText='Configure your web part' description='Please configure the web part.' buttonLabel='Configure' hideButton={this.props.displayMode === DisplayMode.Read} onConfigure={() => this._onConfigure()} />

is this because of react version? Below is my package.json which has all version. If above is correct way to bind method, documentation needs to be updated.

{ "name": "react-recaptcha", "version": "0.0.1", "private": true, "engines": { "node": ">=0.10.0" }, "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "@microsoft/sp-core-library": "1.8.2", "@microsoft/sp-lodash-subset": "1.8.2", "@microsoft/sp-office-ui-fabric-core": "1.8.2", "@microsoft/sp-property-pane": "1.8.2", "@microsoft/sp-webpart-base": "1.8.2", "@pnp/spfx-controls-react": "1.14.0", "@types/es6-promise": "0.0.33", "@types/react": "16.7.22", "@types/react-dom": "16.8.0", "@types/react-google-recaptcha": "^1.1.0", "@types/webpack-env": "1.13.1", "office-ui-fabric-react": "6.143.0", "react": "16.7.0", "react-async-script": "^1.1.1", "react-dom": "16.7.0", "react-google-recaptcha": "^2.0.1" }, "resolutions": { "@types/react": "16.7.22" }, "devDependencies": { "@microsoft/sp-build-web": "1.8.2", "@microsoft/sp-tslint-rules": "1.8.2", "@microsoft/sp-module-interfaces": "1.8.2", "@microsoft/sp-webpart-workbench": "1.8.2", "@microsoft/rush-stack-compiler-2.9": "0.7.7", "gulp": "~3.9.1", "@types/chai": "3.4.34", "@types/mocha": "2.2.38", "ajv": "~5.2.2" } } Thanks! Sidddharth

Issue Analytics

State:
Created 4 years ago
Comments:9 (6 by maintainers)

Top GitHub Comments

1reaction

siddharth-vaghasiacommented, Apr 12, 2021

@joelfmrodrigues - yes we can close this…

0reactions

joelfmrodriguescommented, Apr 11, 2021

Using an arrow function like suggested in current documentation should work: https://pnp.github.io/sp-dev-fx-controls-react/controls/Placeholder/

@siddharth-vaghasia happy for the issue to be closed?

Top Results From Across the Web

PlaceHolder Class (System.Web.UI.WebControls)

Examples. The following code example demonstrates how to dynamically add controls to the PlaceHolder control. ASP.NET (C#)

Creating a Document Template with Place Holders

Place holders support any document property. In Omnia 6.12, placeholders can be used in PowerPoint (PPTX) documents as well, in both header and...

Introduction to Content Controls | Dradis Pro Help

Use content controls to structure your Word reports so that your Dradis ... worked with one type of placeholders, those used for custom...

Placeholders | ASP.NET Web Forms Controls

The ASPxHtmlEditor allows users to add placeholders to editor content. The placeholders can then get the required values. Placeholders.

Modify Content Control Placeholder Text - Greg Maxey

Modify Content Control Placeholder Text — Demonstrates several methods you can ... The information, illustrations and code contained in my "Microsoft Word ...