React Native Arrow Function - using arguments as a state name

Question

I have a client request to add a long sign off form to their RN app. The form has several yes no answers - if yes is selected the user is presented with a text box to provide further details.

I wanted to create a simple return function to create the relevant return the relevant code for each question.

This is what i have so far:

returnCommentsBox = (parentSelector, labelText, thisState) => {
  

  return (
    <View Style={{parentSelector} && EL_Styles.dontShow}>
      <Text style={FormStyles.formLabel}>
        {labelText}
        <Text style={FormStyles.redHigh}>*</Text>
      </Text>
      <View style={FormStyles.textInputBlock}>
        <TextInput
          placeholder="Please Enter Details"
          style={FormStyles.textInputText}
          value={**{thisState}**}
          autoCorrect={false}
          numberOfLines={4}
          multiline
          style={{
            minHeight: 280,
            height: 'auto',
            textAlignVertical: 'top',
          }}
          returnKeyType="done"
          onChangeText={(text) => this.setState({**thisState**: text})}
        />
      </View>
    </View>
  );
};

The bold parentSelector and thisState arguments here are state names, the labelText is a simple text title.

they are called as follows:

{this.returnCommentsBox(
       'gutterInspection',
       '2b. Please enter further details',
       'gutterComments',
  )}

In the above example - the returned object provides the text as it should - but the state names aren't working as expected at all. as in the states aren't updated and the conditional style isn't working. Is this because the argument is supplied as a string? Or the syntax used to embed the argument into the code? Can anyone please help me understand how to make this work?

To use a variable to determine the state key, you need to use `[]`. -> `this.setState({[thisState]: text})}`. — Brian Thompson, Sep 20 '21 at 15:13
Hi @BrianThompson - thanks for your help - but no it still doesn't work sorry - thinking its due to the state being passed in as a quoted string? — Dancer, Sep 20 '21 at 15:41
Also your bolding inside the code does not format correctly and just makes it harder to read. Please remove it. `value={**{thisState}**}` could also be a problem. I don't think you should be passing it an object, but instead the value directly `value={thisState}`. — Brian Thompson, Sep 20 '21 at 15:45
@BrianThompson it doesn't work as in the conditional style doesn't function when the state is changed - if i pass in the state directly rather than as a string - it does work - so {this.returnCommentsBox( this.state.gutterInspection, '2b. Please enter further details', 'gutterComments', )} — Dancer, Sep 20 '21 at 15:47

score 1 · Answer 1 · answered Sep 20 '21 at 15:15

I think you are giving the property keys to the returnCommentsBox function. You can select the value of this property from the EL_Styles and this.state objects by property like this:

returnCommentsBox = (parentSelector, labelText, thisState) => {
  return (
    <View style={[EL_Styles[parentSelector], EL_Styles.dontShow]}>
      <Text style={FormStyles.formLabel}>
        {labelText}
        <Text style={FormStyles.redHigh}>*</Text>
      </Text>
      <View style={FormStyles.textInputBlock}>
        <TextInput
          placeholder="Please Enter Details"
          style={FormStyles.textInputText}
          value={this.state[thisState]}
          autoCorrect={false}
          numberOfLines={4}
          multiline
          style={{
            minHeight: 280,
            height: 'auto',
            textAlignVertical: 'top',
          }}
          returnKeyType="done"
          onChangeText={(text) => this.setState({ [thisState]: text })}
        />
      </View>
    </View>
  );
};

React Native Arrow Function - using arguments as a state name

1 Answers1