Change state in other component in React Native

Question

I'm quite new to React-Native. I have a screen which will render depends on its current state like below. At default (initial state) it will render the login screen. App.js

import React, { Component } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Header } from './components/Export';
import LoginBox from './components/LoginBox';
import AdditionalActivity from './components/AdditionalActivity';
import SignUp from './components/SignUp';


export default class App extends Component {

  state = {
    status: 'initial'
  }

  renderBasedOnLoggedInState() {
    if(this.state.status == 'initial') {
      return (
        <View>
          <Header headerText="APP NAME"/>
          <LoginBox/>
          <AdditionalActivity />
        </View>
      );
    } else if (this.state.status == 'logged') {
      return (
        <View>
          <Text>Welcome to my application</Text>
        </View>
      )
    } else {
      return (
        <View>
          <Header headerText="APP NAME"/>
          <SignUp/>
          <AdditionalActivity />
        </View>
      )
    }
  }

  render() {
    return (
      <View>
        {this.renderBasedOnLoggedInState()}
      </View>
    );
  }
}

When the login below is successed, I need to change the state of component App from "initial" to "logged". How could I do it? The login function here is only for test purpose so don't care much about it XD. LoginBox.js

import React, { Component } from 'react'
import { Alert, Text, View, TouchableOpacity, Button } from 'react-native'
import GreyTextbox from './GreyTextbox'


export default class LoginBox extends Component {
    state = {
        username: '',
        password: '',
    }

    Login()
    {    
        var username = this.state.username;
        var password = this.state.password;
        var userdata = require('./a.json');

        var count = 0;
        for (let j = 0; j < 2; j++) {
            if ((userdata[j].username == username) && ( userdata[j].password == password))
            {
                Alert.alert("true");    
                count++;
            }             
        }   
        if(count == 0)
        {
            Alert.alert("false");   
        }
    }

    render() {
        return (
            <View style={styles.containerStyle}>
                <GreyTextbox
                    secureOption={false}
                    placeholder="username"
                    value={this.state.username}
                    onChangeText={username => this.setState({username})}
                />
                <GreyTextbox
                    secureOption={true}
                    placeholder="password"
                    value={this.state.password}
                    onChangeText={password => this.setState({password})}
                />
                <TouchableOpacity
                    style={styles.buttonStyle}
                    onPress={this.Login.bind(this)} >                   >
                    <Text style={styles.textStyle}>Log In</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = {
    containerStyle: {
        //flex: 0.35,
        height: 180,
        justifyContent: 'space-between',
        marginTop: 40,
        marginLeft: 30,
        marginRight: 30,
        position: 'relative'
    },
    buttonStyle: {
        borderWidth: 1,
        borderColor: '#3da8ff',
        alignContent: 'center',
        justifyContent: 'center',
        marginLeft: 25,
        marginRight: 25,
        paddingTop: 5,
        paddingBottom: 5,
    },
    textStyle: {
        color: '#3da8ff',
        alignSelf: 'center',
        fontSize: 20
    }
}

Possible duplicate of [How to update parent's state in React?](https://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react) — markmoxx, Dec 06 '18 at 15:14
you can use basic react flow i.e. Parent to child data flow by this you can set the state of your parent component from child component. — Vikas Singh, Dec 06 '18 at 15:20

Mukeyii · Accepted Answer · 2018-12-06T15:29:23.637

Create a method which changes the state and pass it down to the child component as prop.

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {status: 'initial'}
    this.changeState = this.changeState.bind(this)
  }

  changeState() {
    this.setState({
      status: 'logged'
    })
  }

  render() {
    return (
      <View>
        <Header headerText="APP NAME"/>
          <LoginBox changeState = {this.changeState}/>
        <AdditionalActivity />
      </View>
  }
}

And in your LoginBox.js you can call it from props:

class LoginBox extends Component {

  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
}

  login() {    
    this.props.changeState;
  }

  render() {
    return (
      {...}
      <TouchableOpacity
        style={styles.buttonStyle}
        onPress={this.login} >                   >
          <Text style={styles.textStyle}>Log In</Text>
      </TouchableOpacity>
    )
  }
}

Another useful tip: Never bind functions in your render method!

Change state in other component in React Native

1 Answers1