通过使用道具从另一个组件 class 给出 state 值

Question

I am completely new in React Native and I am trying to improve my self with some making sample apps. For this scenario, I only want that when the Button is pressed, the state and the value of the toggle change, such as CLOSED and OPEN . And Make Open is not changed. Now, I have three class components. I am not going to give App's class. I've alread completed it. In this class, I have added a prop:

class A extends Component
{
    constructor(props)
    {
      super(props);
      this.state = {change: true};
    }
    render(){ 
     
     return(
      <View>
          <View ...
            <Text>CLOSED</Text>
          </View>
      </View>  
           
    );
  }
}

Here is my second class B:

class B extends Component
{
  state = {isOpen : false};
  render()
  {
    onPress = () => {
       ...
    })
  }
    return(
       <View> 
         <View ...
            <A/>
            <Button 
               title="Make Open"
               onPress={this.onPress}
            />
          </View>
      </View>       
    );
  }
}

I am struggling with the prop. My question is that I want to pass the isOpen value from the class B 's state to class A by use of this prop. I think that I could not create state in class B . What is the easiest way to solve this problem? If I gave not enough information, sorry for that.

Answer 1

When you call component A from component B, you have to pass your state like so:

<A isOpen={this.state.isOpen} />

Then in component A, you can simply access it with props.isOpen .