I've got the following code in React-Admin v3
<AutocompleteInput
onSelect={(value) => {
setCurrentCategory({ reference: value.id });
}}
After upgrading to v4 now the AutocompleteInput uses MUI not downshift, as described in https://marmelab.com/react-admin/Upgrade.html#autocompleteinput-and-autocompletearrayinput-now-use-mui-autocomplete
So the code above breaks with the error:
Property 'id' does not exist on type 'SyntheticEvent<HTMLDivElement, Event>'.
How can I get the selectedItem again as per onSelect on downshift but using React-Admin v4 with MUI?
React-admin's AutocompleteInput uses MUI's <Autocomplete>, which exposes an onChange function for that.
https://mui.com/material-ui/api/autocomplete/#props
Since you're overriding the core functionality of React-admin's AutocompleteInput, I suggest you use MUI's <Autocomplete> directly.
Changed to
<AutocompleteInput
onChange={(value_id) => {
setCurrentCategory({ reference: value_id });
}}
(...)
choices={mainCategories}
optionText="name"
optionValue="id"
Related
From the Rescript Documentation, it is suggested spread can be used to enable passing a pre-existing list to a component. I am confused what exactly MyComponentis in Rescript as I cannot find a way to initialise a component, which can be done with a function in vanilla React.
<MyComponent>...myChild</MyComponent>
where myChild = list{child1,child2}
After several attempts, the followings do not work:
#JSX div(~children=myChild) , because Rescript asks for wrapping it in a list as in list{myChild}
#JSX div(~children=list{myChild}), which gives a type error
Initialising a module named MyComponent, and do <MyComponent> ...myChild </MyComponent>, but this gives the error The value make can't be found in MyComponent
Initialising a function with a capitalisation escape: let \"MyComponent" = () => ..., but this gives the error The module or file MyComponent can't be found.
What I would love is an example of the initialization of the component MyComponent which can be used as a capitalised tag like <MyComponent>...myChild</MyComponent>. Thank you in advance.
module MyComponent = {
#react.component
let make = (~children: list<React.element>) => {
<div> {Belt.List.toArray(children)->React.array} </div>
}
}
From Rescript Forum.
Checking out Flutter Web. Seems Firestore Flutter Web integration is not quite there yet.
Tried to pass {merge: true} param:
webFirestore
.collection("/users")
.doc(uid)
.set(map, {merge: true});
{merge: true} is underlined with red lines. Tried different formats, none working.
Does anyone know how the syntax needs to look like?
This is what the firestore docs are saying:
/// An object to configure the [WriteBatch.set] behavior.
/// Pass [: {merge: true} :] to only replace the values specified in
/// the data argument. Fields omitted will remain untouched.
#anonymous
#JS()
abstract class SetOptions {
/// Set to true to replace only the values from the new data.
/// Fields omitted will remain untouched.
external bool get merge;
external set merge(bool v);
external factory SetOptions({bool merge});
}
Was having the same issue, I believe this works:
webFirestore
.collection("/users")
.doc(uid)
.set(map, SetOptions(merge: true));
try this it will work
firestoreInstance.collection("users").doc(firebaseUser.uid).set(
{
"username" : "userX",
},SetOptions(merge: true))
thank you
I'm having the following error when trying to access a collection helper from a collection:
TypeError: Cannot read property 'username' of undefined
My helper in /imports/api/.../TaskUser.js :
TaskUser.helpers({
username() {
Meteor.subscribe('users');
elUser = Meteor.users.findOne({_id:this.userId})
return (elUser.username)
}});
My component
renderResponsables(){
return this.props.TaskUsers.map((OneTaskUser) => (
<tr key= {resp._id} onClick={() => this.insert(OneTaskUser._id)}>
<td>{OneTaskUser.username()}</td>
</tr>
));
}
It look like sync problem... but how can I know when it's sync in the client? I usually use subscription.ready() but here with a helper I do not know how to do it.
Advice1:
First add below package
meteor add msavin:mongol
then run the program and press "ctrl+m" it will show you the database tables and your subscribed data.there you can whether that your data has been subscribed or not.
Advice:2
Place your subscribe inside the autorun in oncreated
Template.Dashboard.onCreated(function(){
var self = this;
self.subscribe('users');
});
if above dosn't work then I need to check your users table how you created that and how you retrieve data from there correctly
Did you check this https://guide.meteor.com/react.html#data. You should use react-meteor-data package which provides a function called withTracker. Your subscription should go into it and you have to wrap your component with a container to pass the data.
I'm trying to render ag-grid with a fullWidth template, that is actually a directive.
gridOptions: {
fullWidthCellRenderer: function(node) {
var el = angular.element('<div />');
el[0].innerHTML = '<div directive="node.data"></div>';
var tpl = $compile(el)($scope);
return tpl[0];
}
The directive expects a model (from 'directive' attribute) but gets undefined.
I'm guessing there are scope issues here, and I do not want to stringify my data in the html template.
How can I pass the data object into my directive?
Thank you
I managed to solve this in 2 ways:
first is to create a child scope from $scope with `$scope.$new()', assign the node variable to it, and compile to template with it.
second, probably better, is to return the element with no $compile and use
angularCompileRows: true in gridOptions.
I want to be using handlebar helper functions with Sails v0.11.0 , but cant understand how to configure them.
There is a solution which works with previous versions helpers in sails , but not sure how it would work in v0.11.0
This is probably not best aproach but it finaly works for me.
When sails is configured to use handlebars it uses express-handlebars package which is installed as dependency. This express-handlebars uses instance of its dependency package handlebars. You need to use registerHelper method on this instance.
I created config/helpers.js with this content:
var handlebars = require("../node_modules/sails/node_modules/express-handlebars/node_modules/handlebars");
handlebars.registerHelper('decorateElement', function (context) {
return "<span class='red'>" + context + "</span>");
});
You first need to install handlebars
npm i -S handlebars
Then you just need to register a helper. I like to make a helper.js-file in the config-folder for clarity.
Let's say you want to be able to render json:
var handlebars = require('handlebars');
handlebars.registerHelper('json', function (context) {
return JSON.stringify(context);
});
Then, in your views you would just write the following:
<script type="text/javascript">
var object = {{{json example}}};
</script>
the simplest solution for people using sailsjs 0.12 is to add a config/helpers.js file that exports the helper functions:
module.exports = {
ifCond (v1, v2, options) {
if (v1 === v2) {
return options.fn(this);
}
return options.inverse(this);
},
json (context) {
return JSON.stringify(context);
}
};
and in the config/views.js file add the following :
helpers: require("./helpers"),