react-widget | Uploadcare React Widget | Frontend Framework library

Your widget is not showing in your react app because the widget script is loaded and run before your react app has been injected into the DOM. So your widget is trying to query for and inject html into the 'finance-widget' div, however, that div does not yet exist in the DOM (on the page).

You need to split up the loading of the script and the initialization of the widget React app in order to ensure your main App component has been mounted in the page prior to the initialization of the widget.

Go to your widget app, in index.js:

You can change:

I could see pretty-checkbox's developer last published 4 years ago.

Let's say the new module used popper-js@2.0 and someone who already had popper-js@4.0 as direct or sub-dependency in their project is more likely to face unmet peer dependency on using the new module.

Downgrading the version is not recommended due to possible conflict with other modules. A workaround would be to add resolutions.

Before doing anything, ensure there is no other version of react installed globally, delete your node-modules folder and package-lock.json file. Ensure your package.json dependency has react@15.4.0 and only add popperjs@^1.16.0 if you're sure that other modules in your project are not relying on later versions of popperjs.

Take a look at this article for a good explanation on peer dependencies

If there are other modules that needs other versions of popperjs then in your package.json you could add an additional property at the end like below,

testFun is a prop. So use this.props.testFun

The onChange callback fires only when a file is uploaded. If you need to handle this case, consider using onFileSelect instead. For example,

That's the scope problem, this is undefined in renderHobbies.

just binding the renderHobbies will work

So it i think that list should be loaded a then you can filtering your loaded data.In your example on the beginning you don't have value so list is empty, you tape in some text and then value of list re render but it look like is not filtered.....

However I look through code base, and it's look like is not ready until you don't set manually open prop drop down list component. In getDerivedStateFromprops, next data list is read only if in next props is open set. to true

From DropDwonList

From my edit in the original post:

One registration in Azure.

Authenticate as SPA with http://localhost:3000 as the redirect URI. Check both "Access tokens" and "ID tokens" under Implicit Grant.

Expose an API with App ID URI "api://(guid)" Add scope: name whatever you want - I used "api", so it shows up as "api://(guid)/api"

API Permissions -> Add a permission -> MY APIs -> select the application and check the scope you added previously.

And in your authProvider.ts put in the scope: ["(guid)/(YourScopeName)"], so mine is ["(guid)/api"]

I think your issue comes from the return this.setState({ drawResults: res_1.data });

You can't return a setState since setState just modifies the state of your component, you should try to use this.setState({ drawResults: res_1.data });

react-widgets expects id prop with a type of string | undefined. However, in your case, the type of the id is string | number | undefined.

One possible solution would be to convert id prop to the string and pass it down to the DateTimePicker component: