CODEWITHSUNDEEP
javascriptreactjsreact-native
mohamed adel
mohamed adel

Reputation: 715

React Setting State from another file

I have a function which I'm going to use in a lot of screens and I don't want to copy-paste it in every screen component so I created a new component inputValidation.js and put the function there

export function validate(text,type) {
    emailPattern=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    if (type=='username'){
        if (emailPattern.test(text)){
            setState({ validUsername: true })
        } else {
            setState({ validUsername: false })
        }
    }
    if (type=='password'){
        if (text.length < 8){
            this.setState({ validPassword: false })
        } else {
            this.setState({ validPassword: true })
        }
    }
}

and I imported it in my screen component like this loginScreen.js

export default class LoginScreen extends Component {
    static navigationOptions = { header: null };
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            validUsername: false,
            password: '',
            validPassword: false,
        };
    }

    render() {
        return (
            <Container style={styles.container}> 
                <View style={{ flex: 1, justifyContent: 'space-between'}}>

                    <Item style={styles.inputContainer} success={this.state.validUsername ? true : false} bordered regular>

                        <Input
                        onChangeText={(text) => validate(text,'username')}
                        autoCapitalize="none" 
                        autoCorrect={false}
                        style={styles.input} 
                        placeholder='Email' />

                        <Icon style={styles.inputIcon, !this.state.validUsername ? styles.inputIconHidden : null} type='Entypo' name='check' />

                    </Item>
                </View>

          </Container>
        )
    }
}

but I get error can't find variable: setState

I am new to react native so what's wrong ? it was working just fine before I copy-paste the function on another file

Upvotes: 3

Views: 6364

Answers (2)

Dave Newton
Dave Newton

Reputation: 160201

Just setState alone makes no sense (and it never should have worked) because it's an instance function. Since it's an instance function it also won't work because this will be (roughly) meaningless out of a class instance context.

You could pass the setState function along, but that's a road to despair.

Since this is tied to username and password fields you should just have a separate component you bring in to the pages.

If that doesn't work then separate the concerns of "validation" and "what to do with validation results" and don't tie validation to a specific implementation of the validation process.

Upvotes: 4

TKoL
TKoL

Reputation: 13902

I think you might be able to do something like this:

constructor(props) {
    super(props);
    this.state = {
        username: '',
        validUsername: false,
        password: '',
        validPassword: false,
    };
    this.validate = validate.bind(this);
}

...


              <Input
                onChangeText={(text) => this.validate(text,'username')}

This should make it so that inside the validate function, this is bound to your React component and this.setState() thus has a meaning and context.

Upvotes: 2

Related Questions