I'm using react-native-google-places-autocomplete for google places auto-complete.
I'm creating a new page to edit the address and I want to use the setAddressText function to insert the last current address before the editing.
I tried to create a ref and store it with redux of the google autocomplete component but since this search bar rendered only when clicking on the edit button the reference hasn't created and I cant use the setAddressText on the ref.
Does anyone have a solution for that?
You use either useRef or createRef to create the ref object. Before calling any methods on it, you must make sure that myRef.current has been set. The easiest way (if your environment is up-to-date enough to support it) is with the optional chaining operator ?.
myRef.current?.setAddressText(someText);
However I would advise against storing a ref in redux. As a best practice, it is advised that everything in your redux state should be serializable — a ref is not.
Related
After trying to find solution to this issue for hours on various forums i am posting this here.
So i have two components. 1) App and 2) Todo. Both renderes a list and i can complete items so there will be two lists one for incomplete items and one for complete items. you can click on item and it will be gone to complete items list.
So in my example you can see i am using same component but with two diffreent ways to give data to component. one using API and one using native js Data. in both cases it renderes but with api i can click on list item and it will be gone to completed list but with javascript array example it doesn't work. i am completely amazed with this because component is same. how it can affect like that.
many answer here do tell me that computed properties are not reactive as they are cached but what’s the solution to that ? i can put data variable but then the first case of api will not work because time it takes to fetch it. so please help me with this one.
complete code at sfc playground
You have reactivity issues the computed property probably expects that value to be constant because you provide a non-reactive array from the parent.
I think you have 2 options here:
you either provide a reactive prop from parent
or you set a local data attribute in the child-component so that vue will know that it can change
Your fiddle didn't work for me so I copied your code to codesandbox, I have both examples there but commented out the first solution, there you basically simply add the array to the data object and reference that in the code.
Second solution you can add a mounted hook to define reactiveAssignments to your data in the child component this way it will have the same reference so that's why it would work that way.
I think the first solution is simpler, but it is really up to which one you prefer.
You can check the solutions here in my codesanbox
A better approach could be though by setting up component events instead of v-models in the child you should use it in the parent because this way you are directly modifying the props. You can read more about this here: https://vuejs.org/guide/components/events.html#usage-with-v-model
I'm new to vue, and what i would really want to do is to have the possibility to insert a component into another component, without knowing the name of the component.
What i can do, at the moment, is to create a component "componentA" in which i make use of another component "componentB".
However, my goal would be to have componentA declare that it wants to use some component, when it doesn't yet know the component's name. Then, obtain the component's reference through props (or wherever) and use it.
In the same way that, through props, a component can obtain information without knowing what it's gonna be, i would like to know if the component can receive another component and make use of it, without knowing what the component is gonna be.
Is there a way to achieve this in vue.js?
Edit: It can be done by using Dynamic Components. Thank for providing the answer in the comments.
I have a VueX state that contains a list of items. E.g.:
{
operations: Operation[]
}
We need to display each Operation as an item in a list. So we have an OperationList component and an OperationItem component.
When it comes to rendering the list (v-for), would it be recommended to pass the entire item as a prop or just the id and have the OperationItem read the data from VueX?
Basically:
<operation-item v-for="operationId in operationIds" :id="operationId" :key="operationId"/>
vs
<operation-item v-for="operation in operations" :operation="operation" :key="operation.id"/>
I think it might be a preference choice but in my projects I usually pass all the prop of the components that way :
<operation-item
v-for="operation in operations"
:key="operation.id"
:prop1="operation.prop1"
:prop2="operation.prop2"
:prop3="operation.prop3"
/>
I'm not sure if that's a good practice or not but in this case, it's more flexible, you don't need to give a structured object for it to render, you just have to give it all it's properties.
A bit like for a class constructor, I would pass all the necessary parameters separately instead of passing them in an $option array or Settings class.
For some components, it also doesn't make sense for them to be aware of the store, they should juste be "stupid" rendered components.
I hope it's clear enough that you get my point !
I'd say pass the entire item. That way your component doesn't need to know where the data came from and you would be able to reuse the component in situations where the data didn't come from Vuex.
I have an application that has hundreds of screens. I usually pass the variables from parent to child between the components with props. I find it very uncomfortable to pass the array with the user information hundreds of times.
I am testing the global variables of react native. Does it have any danger to use a global variable to save user information and modify it within the components?
I have searched for documentation and nothing is said. I know it's not correct in react, but it works wonders for me.
Any recommendation?
If that global variable is a constant or it's value doesn't effect rendering of components then you are good to use it as global variable or async storage.
But if it's value is changing and affecting the rendering of component then I highly recommend you to store that value as state and to make it global you can either use
1) Context api (https://reactjs.org/docs/context.html)
2) Or Redux
It's easy to get a reference to navigator in the renderScene function, so calling navigator.push(newRoute) is simple when responding to an event that happens from within the JSX tree.
In my case, though, I want to call navigator.push(newRoute) from an external event. My app signs the user in with Google and fires an event when the sign-in is complete, and I want to navigate to a new route in that case.
How can I get a reference to the navigator? Is there any way to get it besides as a parameter to renderScene?
You can get the navigator through refs property: https://facebook.github.io/react/docs/more-about-refs.html. It's part of react (not specific to react native). It's not obvious from the react-native docs that there is a number of 'react' features that can be used in react-native, so i'd really advise to take a close look at react in general.
Note however, there is a good reason Facebook does not mention refs explicitly and loudly. Refs is really not a "go-to" way of accessing component. Your case might be of course different, but it's likely that the Google sign-up is not in-fact "external". It might actually be part of one of the components in the hierarchy tree above the navigator (in which case you can pass the state change down the tree).
Quoting from the summary of the "More about refs" document above:
If you have not programmed several apps with React, your first
inclination is usually going to be to try to use refs to "make things
happen" in your app. If this is the case, take a moment and think more
critically about where state should be owned in the component
hierarchy. Often, it becomes clear that the proper place to "own" that
state is at a higher level in the hierarchy. Placing the state there
often eliminates any desire to use refs to "make things happen" –
instead, the data flow will usually accomplish your goal.
Again - your case might be different and using refs might be perfectly justified, but if you are tempted (for example) to separate out all the Google-related stuff to separate object and if that makes the sign-up "external" - think twice. React really encourages putting all things related to a "component" logic in one place (the component) - even if that includes various technologies and external APIs.