CODEWITHSUNDEEP
reactjsreact-native
SukhiX07
SukhiX07

Reputation: 27

How to get state of class from another file React-Native

I am trying to get state of a class from another class but it throws an error "cannot read property 'state' od undefined". My approach is when the user press the button the "FromStr" state get redirect to another class B from A. i tried

import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import styles from "./appstyles";
import {getValue} from "./main"

export default class A extends Component{
  constructor (props) {

    super(props)
    this.state={
        From:'',
        FromStr:'',   
    }
  }

 changeText=(From)=>{
  this.setState({From})

 }

 onPress = ()=>{
   this.setState({FromStr: this.state.From})
   this.fetch()
 }
 fetch(){
   getValue();
} 

render(){

return (
<View>
    <View style={styles.inputFields}>
    <TextInput placeholder="From" id="from" style={styles.fromField} onChangeText={this.changeText} />
  <View style={styles.buttonStyle}>
  <Button
      title={"Go Back"}
      color="#f194ff"
      onPress={this.onPress}

  ></Button> 
);
}
}

Class B
import React, { Component } from "react";
export function getValue(){
  alert(this.state.FromStr);
}

Upvotes: 0

Views: 1909

Answers (3)

hong developer
hong developer

Reputation: 13926

There are many ways to do this. The simplest way is to use LocalStorage .

Usage

A screen

this.setState({FromStr: this.state.From
              }, () => localStorage.setItem('FromStr', this.state.From));

B screen

componentDidmount(){
  const data = localStorage.getItem('FromStr')
  alert(data);
}

Upvotes: 0

Thivya Thogesan
Thivya Thogesan

Reputation: 216

Shared state between components by direct access is an anti-pattern. Each component should have its own state. If you need globally, please consider using Redux. Passing state as props is also valid, but it only works when components are in parent-child order. Redux allows components to be updated irrelevant of their relationship

As mentioned , pass state as props to their children.

class classname2 extends React.Component {
  this.state = { statename1: "lala" };
  render() {
    return <classname1 statename1={this.state.statename1} />
  }
};

class classname1 extends React.Component {
  render() {
    return (
       <div>{this.props.statename1}</div>
    );
  }
};

Upvotes: 2

Orhan
Orhan

Reputation: 179

You can define class A's this as global inside it's container. Then, call it from class B. For example;

//class A constructor
constructor(props){
    super(props);

    global.__classAThis = this;
}

//class B constructor
 constructor(props){
    super(props);

    console.log(__classAThis);

    //also you can update class A this
    __classAthis.setState({test: true})
}

Upvotes: 0

Related Questions