I have a list i need to render with a button that will onPress save a value to the store then change to a different route but the problem is that when I console.log(props) i get {"index":1, "title":"hello world"} but if I do console.log(props.index) i get blank it doesn't give me a value why is this?
Your error must come from something else. There is no problem with what you are describing, such as :
var props = {
"index": 1,
"something": "else"
}
console.log(props);
console.log(props.index);
Try to use an other prop name like "myCustomIndex", i'm not sure but maybe this keyword is not allowed in props.
Related
I have a functional component that manages a question that can come from two sources.
A props value comes in indicating the source.
When the source changes, I want to create a new question model object with the new source.
Since I'm doing something like this:
const [questionModel, setQuestionModel ] = useState(new QuestionModel(questionSource));
For some reasons it thinks, "Oh, I've already got one of those questionModel's. I don't need to make a new one".
So all the old stuff stays there.
If I try to do something like:
setQuestionModel(new QuestionModel(questionSource));
Then it complains about:
Invariant Violation: Too many re-renders. React limits the number of
renders to prevent an infinite loop.
I get that infinite loops are bad, but I'm not sure how to make this work in ReactJS functions with hooks.
Back when I was using classes, I could specify something once in the constructor and then adjust it again in the render(). But now that the render is mixed in with the other code for the function, how do I re-render it with the new source?
Is there a force re-render when the props change? I thought it would do that if a prop changed ... but it doesn't.
I don't know how your props changes but I saw sometimes, that the following misunderstanding creates sometimes problems, where the developer thinks "I changed the object, so why my component doesn't rerender?":
When you create a new object like:
const user = { name: "john" };
You created an object that, has a property that points to the value "john" like this:
user -> { } -- name --> "john"
user points on an object and when you make name, point to a different value by:
user.name = "bob"
than user still points to the same object and to react it's the same object
but when you do
user = { ...user, name: "bob" };
then you would assign a new object and now it's a different object.
Look at using useEffect with a dependency of the prop that is being passed in. Within the effect, set the new question type in local state.
https://reactjs.org/docs/hooks-effect.html
Like this...
interface Props {
source: QuestionSource
}
export function QuestionsModal(props: Props) {
const [questionModel, setQuestionModel] = useState<QuestionModel>(new QuestionModel(questionSource))
useEffect(() => {
setQuestionModel(new QuestionModel(questionSource))
}, props.source)
}
Per the docs you can add the attribute use-input to a QSelect component to introduce filtering and things of that nature: https://quasar.dev/vue-components/select#Native-attributes-with-use-input.
However, if you type something into one of these fields and click outside of it, the text gets removed.
Is there any way to grab that text in Vue before it gets removed and do something with it?
Since v1.9.9 there is also a #input-value event described in the q-select api.
As the api says it's emitted when the value in the text input changes. The new value is passed as parameter.
In the examples there's a filter function, so there you can save it in a data variable:
methods: {
filterFn (val, update, abort) {
update(() => {
this.myDataVariable = val;
})
}
}
Kinda new to react/react-native.
I have a list component that contains an array of items in state
The list component sometimes query the server for information, and according to the information he gets from the server, he should update some things in the items state.
For testing purposes, I tried to do the something like the following:
componentWillMount() {
this.setState({posts: [<Item key={0} ... >, <Item key={1} ... >]}
}
...
testFunc() {
... // get data from server
this.state.posts[0].updateNewInfoFromServer(new_info);
}
But it didn't work, and it printed that the updateNewInfoFromServer function of my item component is undefined (it did the same when I tried to change it to any other function of my item component. It's pretty weird to me that I can't access the component's functions but I am able to access its props).
I also tried to add refs to the Items inside the posts array and then try to call this._myref.updateNewInfoFromServer inside the testFunc(), but I got exactly the same error..
What is the "react" way to solve this problem?
Thanks a lot!
I've got a little problem with vuejs.
My state is basically something like this.
state: ()=>({
activeSide : "from",
}),
I want a component to be focused or blurred based on whether activeSide has the value activeSide set to "from" or not
my idea at the moment, doesn't seem to be very elegant, I basically created a computed property in my component,
focusSide(){
console.log("changed active side")
this.$store.state.activeSide
}
and then I set up a watch to see if that property changes.
watch:{
focusSide : function(newV,_){
console.log("changing focus")
newV=="from" ? this.$refs.fromArea.$el.focus() : this.$refs.fromArea.blur()
}
},
the problems here is that apart from the fact that the solution doesn't look elegant the watch doesn't work either, I've seen that focusSide is changing its value correctly (or at least the body of the method is executed), but the watcher is not executed, I have the feeling that since focusSide state is never used in my template, vuejs thinks that it's not necessary to react and change values, something like reactive frameworks where if the value is not observated then don't change (maybe I'm wrong)
what would be the ideal way for achieve this???
thank you
You need return value of computed properties focusSide, otherwise it will always return undefined
focusSide () {
console.log("changed active side")
return this.$store.state.activeSide
}
My Question i have two Scene OnceScene and TwoScene I want to Navigate from OnceScene to TwoScene and at the same time i want to pass some array from 1st the 2nd so for that i have written the below code
this.props.navigator.push({
id: "productdetails",
passProps: {arr: arr[rowID]}
});
you can see i am passing the array in passProps but how can i acess that array in TwoScene Its seems simple but since i am new i dont have much idea.
Have you tried using react-native router?
https://github.com/aksonov/react-native-router-flux
Also answering to your question it seems like you are passing the data through props. So on the next screen you can access these props like: this.props.foo (of course you need to declare it on the second screen somehow to access it.)
I found what i was missing ,forgot to declare
return (<ProductDetails title="ProductDetails"
navigator={navigator}
{...route.passProps} route={route}
/>)
on my return component. This is the reason i was getting undefined value.