I'm using the react-instantsearch module on a React Native app. I'm using it as a controlled component, passing in a searchState like so:
<InstantSearch
appId='something'
apiKey='somethingElse'
indexName='index'
searchState={this.props.algoliaSearchState}
>
When I change the category (hierarchicalMenu) or location (aroundLatLng), this works fine, but when I change the query it has no effect on the hits that I get.
I can see that the query is being passed in (both by logging, and in react-native devtools:
Any ideas what could be going wrong here?
For a refinement to be applied, it needs to be present inside the search state and have a corresponding widget mounted.
For hierarchicalMenu it's HierarchicalMenu, for aroundLatLng it's Configure and for query it's SearchBox.
If you don't want any rendering for a widget just create a VirtualWidget. But for its refinement to be applied, it should be mounted.
Related
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?
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.
I have a small application in react-native with two components.
on Navigating to a component twice this gives me error for setState function.
Anybody have idea about this .
I am using native base as an starter kit for my project.
the only change I did is I have seperated the UI render part in different js file.
Thanks in advance.
this has something to do with your render function.
the setstate function gives error when there is no such state variable available.
may be on navigating again to that same screen it is giving you a new state for that page instead of the previous state.
Please check your render function.
I'm building an app in React native, and basically, I need a modal(which will have the same content every time) to be available globally (in all components of app), so that I can be able to open it from anywhere in my app.
Obviously copy/pasting the same modal in all the components is not a good solution
Right now I'm having tons of trouble implementing it, so I would like to know what would be the best way to accomplish something like that
Use a Navigator and place your modal below it. Make it visible only when the state changes. The state can be changed from each component inside the Navigator via props.navigator.
You can see the full code with explanation here http://browniefed.com/blog/react-native-easy-overlay-modal-with-navigator/