How to pass multiple mobx observer states into function as parameter

Question

I have these states:

  @observable questionString: string = '';
  @observable questionLengthRemaining: number = 25;
  @observable descriptionString: string = '';
  @observable descriptionLengthRemaining: number = 500;

And i have this function:

onInputChamge = (state: any, stateLengthRemaining: any, maxLength: any, text: string) => {
    state = text;
    stateLengthRemaining = maxLength - text.length;
  }

And here is my component:

<TextInput
            multiline={true}
            maxLength={questionMaxLength}
            placeholder='Type your question here'
            style={styles.questionInput}
            onChangeText={(question) => this.onInputChamge(this.questionString, this.questionLengthRemaining, questionMaxLength, question)}
          />

I have multiple textInputs that just need to do the same thing and take in the onInputChange function, but with just different states and lengths. For some reason, passing in the states as parameters in the function does not work, but when I create different functions for each of them like:

onQuestionChange = (text: string) => {
    this.questionString = text;
    this.questionLengthRemaining = maxQuestionLength - text.length;
  }

It works.

It's super pointless to make the same function for each input, because that's what functions are supposed to limit. I'm using typescript and mobx by the way. Any way to do this? (If i console log the length remaining, it prints out correct numbers and strings so idk what is going on)

You first example have nothing to do with mobx and it does not work because there is no "pass by reference" available in JavaScript. You basically reassign value inside your function and that's it. More info: https://stackoverflow.com/questions/7744611/pass-variables-by-reference-in-javascript — Danila, Jul 06 '20 at 08:49
As for the question itself, where do you store this `observable`s? In the same class component? Or it is separate class store? — Danila, Jul 06 '20 at 08:49
Same class component, not hooked up to store yet. Also, these variables are getting changed, I add a console.log(state, stateLength) at the end of onInoutChange and it prints out the correct values. Seems like it’s just not rendering the change for the stateLength — frankied003, Jul 06 '20 at 12:43

Danila · Accepted Answer · 2020-07-06T16:25:22.627

0

If you have all observable in the same class component then you could do something like that:

onInputChange = (key, value, stateLengthRemaining, maxLength, text) => {
    this[key] = value
}

and then pass name of the property like that question => this.onInputChange('questionString', question, ... )

You also don't really need to manually assign descriptionLengthRemaining because you can just make it computed property https://mobx.js.org/refguide/computed-decorator.html

@computed get questionLengthRemaining() {
   return 25 - this.questionString.length
};

edited Jul 06 '20 at 16:25

answered Jul 06 '20 at 13:50

Danila

15,606
2
35
67

I get this error for trying to use this[key] = value. Error: No index signature with a parameter of type 'string' was found on type 'CreateVoleScreen'. And yes, I'll be using a computed function from now on. – frankied003 Jul 06 '20 at 14:41
Wait, it works! Thank you! Getting that weird typeScript error though... – frankied003 Jul 06 '20 at 14:48
This pattern I mentioned above is very rough and simple, but in reality you should probably do something like that: https://codesandbox.io/s/httpsstackoverflowcomquestions62748687-nkw5b?file=/src/App.js Basically create `Field` wrapper around you fields. I hope this code makes sense, if not just ask more questions :) – Danila Jul 06 '20 at 16:35

How to pass multiple mobx observer states into function as parameter

1 Answers1