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?