I'm currently working on a sample application to learn Kotlin/Js with the react library. When using the normal JSX syntax, a component can be set to be triggered when a specific URL hits using the BrowserRouter & Route API like below.
Main Component
Navigation Component as directed like in this youtube video
When attempting the above code in Kotlin, it resembles something like the screenshot below using the KotlinDSL
The main function where the component is rendered is shown below
However, that creates an Uncaught Error Exception like the one below
One of the reasons its also so difficult to debug is because my source maps dont work and hence most of my debugging errors are actually in Javascript. But anyways after searching up the javascript error, I found this article about the new Router update that disallows adding components as children.
As a result I tried to pass in the components through the element prop but there seems to be some incompatibility with them.
the element prop accepts an optional ReactNode? and I cant seem to convert my Function Component of type props to a ReactNode. When I try to pass in an optional ReactElement? by calling the create method, I also get an error.
I have been struggling with the Kotlin Documentation and can't seem to find enough examples of react-router implemented.
Can anyone help me out with how to pass in a Function COmponent into the element prop for the React Router?
Related
I wish to use Algolia to setup InstantSearch in my React Native project. I am using this tutorial to learn the basics.
It appears in their RefinementList and InfiniteHits components there is a parameter: refine. This parameter seems to play a key role in the functionality of this tutorial's app.
Where can I get an example of how this refine() method would look like?
Please help me with some resources. An explanation of this refine() method would also help.
Thanks!
I think there's a typo in the documentation at the time of this writing (for which I opened a pull request), and the name of the actual prop is refineNext.
The documented InfiniteHits example from the React Native guide uses a connector, which is a lower-level abstraction allowing users to fully control the UI. This is what allows you to use React Native code for the UI while having access to the InfiniteHits data and logic. You can read more about the connectInfiniteHits connector in the documentation.
The provided refineNext function lets you load more results. It doesn't take any arguments, all you need to do is call it whenever you want to load more results from Algolia. In the example, it's being used in the onEndReached callback of React Native's FlatList component, whenever the hasMore provided prop is true. This allows loading more results once when the scroll position gets within onEndReachedThreshold of the rendered content.
I'm building a Vue.js app that will be run on devices where I don't have access to a dev tools console, such as a game console. I've created a vue DebugPanel component that contains several tabs, one of them being a "log" to write to.
The UI is mostly working as I expect, but now I need to actually take what's in the console and have it output to the element in the component.
I'd like to use this solution of hijacking the consol.log function. This solution works great in a non-vue HTML page, but I'm having trouble with the best way to incorporate it into a Vue.js app.
The issue I'm having is that each tab section on my DebugPanel is hidden/shown based on a v-if attribute. The log element is only in the DOM when its tab element shown. So a call to document.getElementById errors.
Any thoughts on how to implement this in Vue.js?
You can just use Vuex store to pass data through all the app. And i think it would be better to use it in your app for global data.
Note, before reading I have already looked at the following:
JestJS -> Invariant Violation: Could not find "store" in either the context or props of "Connect(Portfolio)"
ReactJs/Redux Invariant Violation: Could not find "store" in either the context or props of "Connect(LoginContainer)"
Could not find "store" in either the context or props of "Connect(App)" In an react-redux app
Also, I followed the tutorial shown here: https://www.youtube.com/watch?v=9mlwjZL3Fmw
The major difference is that I used create-react-native-app to initialize my project where the video creator does not.
I want to know if it's possible to get the connect to recognize all the components while keeping the App component in App.js as a js const.
The previous solutions offered work when I switch to using a javascript class instead:
class App extends React.Component { etc..
The code is available here: https://github.com/qxh5696/first-react-native-app
I'd like to find the root cause as to why the "store" is not being recognized. Call it stubbornness but I am curious to know if anyone has found a solution to this problem.
The root cause of the error is when we put together a react-redux application we should expect to see a structure where at the top we have the Provider tag which has an instance of a redux store.
That Provider tag then renders your parent component, lets call it the App component which in turn renders every other component inside the application.
Here is the key part, when we wrap a component with the connect() function, that connect() function expects to see some parent component within the hierarchy that has the Provider tag.
So the instance you put the connect() function in there, it will look up the hierarchy and try to find the Provider.
Thats what you want to have happen, but in your test environment that flow is breaking down.
import
import {connect} from "react-redux";
instead of
import connect from "react-redux/es/connect/connect";
I'm trying to integrate third-party component Adaptive card in my application using VueJs but getting following error when wrapping it inside a separate component so that I can re-use it in other places.
Error in mounted hook: "TypeError: this._card.onExecuteAction is not a
function"
I've created a Demo to show the work done so far, can anyone suggest what I'm missing here.
I just need to integrate this adaptive card in my project as a reusable component
In fact, you are trying to call onExecuteAction function, instead of assigning it. It can be fixed, like this: this._card.onExecuteAction = action => this.$emit("action", action);
ps. i suggest you need also use :card="card" in your component template definition in TodoLis.vue and then add something like #action="handleAction" to it, to handle events emitted by your component.
I am currently developing a web application that is used to display elements for events on a map provided by HERE Maps. I am using Vue.
I have some components, but the relevant component is the component HereMaps.vue which initializes the map using the HERE Maps Api.
The HERE Maps Api provides the possibility to place so called InfoBubbles on the map showing additional information. These InfoBubbles can be provided some HTML-code in order to customize their appearance.
Please refer to the documentation for additional information
Following the documentation the code looks something like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<div class='someClass'>Some Content</div>"
});
this.ui.addBubble(bubble)
This is happening after mount in the "mounted" method from Vue in the "HereMaps" component.
The Bubbles are added in a "closed" (hidden) form and dynamically "opened" to reveal their content when the corresponding marker icon on the map is clicked. Therefore the HTML-code is present on the DOM after the component is mounted and is not removed at a later stage.
Now instead of supplying custom code within each bubble added to the UI i want to just add a component like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<myDynamicComponent></myDynamicComponent>"
});
this.ui.addBubble(bubble)
It does not matter to me wether the component is initialized using props or if it is conditionally rendered depending on the state of a global variable. I just want to be able to use the "myDynamicComponent" in order to customize the appearance in a different file. Otherwise the design process gets very messy.
As far as i know this is not possible or at least i was not able to get it work. This is probably due to the fact that the "myDynamicComponent" is not used within the "template" of the "HereMaps" component und thus Vue does not know that it needs to render something here after the directive is added to the DOM in the "mounted" method.
This is what the InfoBubble looks using normal HTML as an argument:
This is what the InfoBubble looks using the component as an argument:
It appears to just be empty. No content of the "myDynamicComponent" is shown.
Does anyone have any idea how i could solve this problem.
Thank You.
Answer is a bit complicated and I bet you wouldn't like it:)
content param can accept String or Node value. So you can make new Vue with rendered your component and pass root element as content param.
BTW, Vue does not work as you think, <myDynamicComponent></myDynamicComponent> bindings, etc exists in HTML only in compile time. After that all custom elements(components) are compiled to render functions. So you can't use your components in that way.
Give us fiddle with your problem, so we can provide working example:)