How to get state of children from parent in class component

Question

I'm trying to display the state of child component in parent component, but somehow the text "abcde" still not show, here is the sample code

import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-ui-lib';

class ChidComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    };
  }
  render() {
    return (
      <SafeAreaView>
        <TouchableOpacity
          onPress={() => {
            this.setState({text: 'abcde'});
            this.props.getText(this.state.text);
          }}>
          <Text>Get Text</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}

const style = StyleSheet.create({
  text: {
    fontWeight: 'bold',
    fontSize: 40,
  },
});
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
    };
  }
  getTextFromChild(value) {
    this.setState({text: value});
  }
  render() {
    return (
      <SafeAreaView>
        <Text>{this.state.text}</Text>
        <ChidComponent
          getText={this.getTextFromChild.bind(this)}
          press={() => this.setState({show: !this.state.show})}
          textStyle={style.text}
        />
      </SafeAreaView>
    );
  }
}
export default ParentComponent;

But somehow the screen still empty, the 'abcde' still until i click twice, come from functional component so i don't know what going on, please help, thank you a lots

Hi! Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button). Stack Snippets support React, including JSX; [here's how to do one](http://meta.stackoverflow.com/questions/338537/). (Yes, the question is about React Native, but the vast majority of React Native questions are really React questions, you can mock it up in React.) — T.J. Crowder, Dec 11 '21 at 15:01
It can run @T.J.Crowder, just because it a react-native so i cant run it here — normalDev, Dec 11 '21 at 15:05

saibbyweb · Accepted Answer · 2021-12-11T15:26:41.453

0

Your getTextFromChild method in the ParentComponent is removing the show property from the state, update it to this:

 getTextFromChild(value) {
    this.setState({text: value, show: true });
  }

EDIT: setState is async, you can pass a callback function as an argument to access the updated state.

   <TouchableOpacity
          onPress={() => {
            this.setState({text: 'abcde'}, () => {
              this.props.getText(this.state.text);
           }); 
   }}>

Should work.

edited Dec 11 '21 at 15:26

answered Dec 11 '21 at 15:11

saibbyweb

2,864
2
27
48

Thank for your answer, it can run, but i have to press twice, i still dont get it – normalDev Dec 11 '21 at 15:14
I update the question – normalDev Dec 11 '21 at 15:16
I still don't get it, as i know, async function mean the `function will not run in order` but `run the same time`, so why when i press the setState wont run? but thank you so much, the function run now – normalDev Dec 11 '21 at 15:44
Glad it helped! Consider upvoting and accepting this answer. Regarding `setState` being async, you can read about it here: https://stackoverflow.com/a/36087156/3565182 – saibbyweb Dec 11 '21 at 20:28

How to get state of children from parent in class component

1 Answers1