accessing the state outside the class - Reactnative - this.setState is not a function

Question

I am using custom floating text labels which are outside the class and I want to set the state within it. how can I do it please

I have two floating text fields when I click the button I want to set the state to the entered values in the input text field.

The error is get is

this.setState is not a function

const TextfieldWithFloatingLabel_Card = MKTextField.textfieldWithFloatingLabel()
  .withPlaceholder(strings.nineDigitCardNumber)
  .withStyle(styles.textfieldWithFloatingLabel)
  .withTextInputStyle({ flex: 1 })
  .withFloatingLabelFont({
    fontSize: 12,
    fontWeight: '200',
    color: colors.primaryColor
  })
  .withKeyboardType('numeric')
  .withOnEndEditing(e => {
    this.setState({ cardDigits: e.nativeEvent.text });
    console.log('EndEditing', e.nativeEvent.text);
  })
  .build();

const TextfieldWithFloatingLabel_NationalId = MKTextField.textfieldWithFloatingLabel()
  .withPlaceholder(strings.nationalIdNumber)
  .withStyle(styles.textfieldWithFloatingLabel)
  .withTextInputStyle({ flex: 1 })
  .withFloatingLabelFont({
    fontSize: 12,
    fontWeight: '200',
    color: colors.primaryColor
  })
  .withKeyboardType('numeric')
  .withOnEndEditing(e => {
    this.setState({ nationalIdNumber: e.nativeEvent.text });
    console.log('EndEditing', e.nativeEvent.text);
  })
  .build();

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cardDigits: '',
      IdNumber: ''
    };
  }

  render() {
    //console.log('rovers - ' + JSON.stringify(this.state.rovers))
    return (
      <ScrollView style={styles.mainContainer}>
        <TextfieldWithFloatingLabel_Card ref="tiNumber" />
        <TextfieldWithFloatingLabel_NationalId ref="tiNationalId" />
        <TouchableOpacity
          title="Transactions"
          style={{
            height: 60,
            backgroundColor: '#673fb4',
            marginTop: 20,
            alignItems: 'center',
            justifyContent: 'center'
          }}
          onPress={() => {
            consoleLog(
              'cardnum : ' +
                this.state.cardDigits +
                ' national id - ' +
                this.state.IdNumber
            );
          }}
        >
          <CommonText style={{ color: 'white' }}>
            {strings.signInLower}
          </CommonText>
        </TouchableOpacity>
      </ScrollView>
    );
  }
}

Thanks R

Did you read the react documentation on [Handling Events](https://reactjs.org/docs/handling-events.html)? This is a core concept of react. You need to pass a handler to stateless components that is bound to the component holding the state. HINT: Your label components expose a `onEndEditing` prop that you need to pass a handler on render instead of statically defining them in the builder. — trixn, Oct 16 '18 at 15:34

Hemadri Dasari · Answer 1 · 2018-10-16T16:20:44.247

0

Change

TextfieldWithFloatingLabel_Card

To a function instead of a variable and wherever you call TextfieldWithFloatingLabel_Card in the component pass this as a parameter to it so that when you do setState it will work

I will give you hint on how to do

Test.js

 const test = this = {
      this.setState({test: “working”});
 }
 export = test();

App.js component

 import { test } from “./Test”;

 callTest = () => {
     test(this);
 }
 render(){
     return(
          <div onClick={this.callTest}>

          </div>
     )
 }

So the point here is you need to pass component this to imported regular functions so that you can set the state of the component.

What you doing is old methodology. I would recommend you to handle the event handler functions with in components.

Please execuse me if there are any typo errors because I am answering on my mobile

edited Oct 16 '18 at 16:20

answered Oct 16 '18 at 15:40

Hemadri Dasari

32,666
37
119
162

This would work but why would you favour this instead of just implementing the handler in the component itself? – trixn Oct 16 '18 at 15:46
If I, I would do in component itself since OP wants to do setState only in exported function from other module I advised on how to do that by passing this to a function – Hemadri Dasari Oct 16 '18 at 16:10
I don't think that OP wants to do it in an exported function. He/She just didn't know how to do it otherwise with the component builder. Maybe he didn't know you can also pass the handler as a prop and it is not required to statically define them. It just does not make much sense because the handler is strongly reliant on the shape of the state in that specific component. – trixn Oct 16 '18 at 16:29
I Agree with you. – Hemadri Dasari Oct 16 '18 at 16:32

accessing the state outside the class - Reactnative - this.setState is not a function

1 Answers1