CODEWITHSUNDEEP
reactjsreact-native
cjmling
cjmling

Reputation: 7278

Access Other component variable/states

I want to access state data or Portfolio in TotalTab/ProfitTab/LossesTab. I want them to get the data updated ( get data bind ? ) when async fetchData is finish also.

My code is as below

class Portfolio extends Component{

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource : ""
        };
    }

    componentDidMount() { //This function get called once when react finished loading. Something like jQueryDom Ready seems to be https://facebook.github.io/react-native/docs/tutorial.html
       this.fetchData();
    }

    fetchData() {
        fetch("http://beta.setmonitor.com/api/trading/summary?portfolio_id=3")
        .then((response) => response.json())
        .then((responseData) => {
            this.setState({
               dataSource: responseData,
               isLoading: false
            });
        })
        .done();
    }

    render() {
        return (
          <ScrollableTabView>
            <TotalTab tabLabel="Total" />
            <ProfitTab tabLabel="Profit" />
            <LossesTab tabLabel="Losses" />
          </ScrollableTabView>
        );
    }
};

I tried creating an another class for just fetching data and storing and use it like new ClassName but the problem is that async data don't get update in the view.

Upvotes: 0

Views: 73

Answers (1)

BradByte
BradByte

Reputation: 11093

Utilize props. You can pass the data down to the Tab components and React will automatically keep it in sync. If needed, you can also declare a function in the Portfolio component and pass that down to the children as needed. React Docs - Data Flow

Upvotes: 2

Related Questions