Dot notation in Semantic-UI-React

#2 · closed · 4 comments

View on GitHub ↗

davidsavoie1

I'm having some trouble using [Semantic-UI-React](https://react.semantic-ui.com/introduction) with viewmodel-react-plugin for tags using the dot notation, such as `<Form.Field>`. Here's my code, adapted from [this example](https://react.semantic-ui.com/collections/form#form-example-form): ``` import { Button, Form } from 'semantic-ui-react'; TestPage2({ created() { console.log({ Form }); }, render() { <Form> <Form.Field> <label>First Name</label> <input placeholder="First Name" /> </Form.Field> <Button type="submit">Submit</Button> </Form>; }, }); ``` When I execute this code, I get an error stating ``` While processing files with ecmascript (for target os.linux.x86_64): /home/david/Documents/truckbox2/node_modules/viewmodel-react-plugin/dist/index.js:251:13: imports/ui/TestPage/TestPage2.js: Cannot read property '0' of undefined ``` If I comment out the `<Form.Field>` tags, it works ok. The other tags are showing up fine. I also logged the `Form` object on creation to see if it contains a Field property, and it does. Is there something in conflict with viewmodel-react-plugin and dot notation in component names? If so, would you have any advice?

Comments

ManuelDeLeon

Pick up `viewmodel-react-plugin 3.0.5` and let me know if anything. Thanks!

davidsavoie1

Wonderful! Thanks a lot for your excellent work and support! Can't wait to explore these functionnalities now...

ManuelDeLeon

Take the following with a grain of salt... I personally don't like React component libraries because they force you to use their components in a specific way. For example you can't use 2-way bindings on inputs, you have to wire up the onChange event and manually update a property. Another reason is that I'm already depending on Semantic-UI, semantic-ui-react is yet another dependency and level of abstraction for my app. IMO the benefits are slim (mainly removing JQuery) and you have yet another API to learn and deal with. But by all means try it and if it jibes with you then don't worry about my opinion and just use it.

davidsavoie1

Yeah, I'm aware that this could be in the way of ViewModel, but I did want to give it a try. I do have some trouble with some plain Semantic-UI functionnalities on a mobile (Cordova) app I'm trying to develop. Everything that uses JQuery animations don't seem to work properly and I could not find any answer to [my problem](https://stackoverflow.com/questions/44675773/semantic-ui-dropdown-error-on-mobile-only-element-is-no-longer-attached-to-dom)... We'll see! And *I DO value your opinion*, it's been really helpful so far!