Hot to get selected value from another component?

Question

I create a component Confirm.js with react-native <Modal /> that has two DropDownMenu and two <Button />.

I want user click the Yes <Button /> than i can get the DropDownMenu onOptionSelected value. I think i should use this.props but i have no idea how to do it.

I want get the value in MainActivity.js from Confirm.js

Any suggestion would be appreciated. Thanks in advance.

Here is my MainActivty.js click the <Button /> show <Confirm />:

    import React, { Component } from 'react';
    import { Confirm } from './common';
    import { Button } from 'react-native-elements';
    class MainActivity extends Component {

      constructor(props) {
        super(props);
        this.state = { movies: [], content: 0, showModal: false, isReady: false };
      }

      // close the Confirm
      onDecline() {
        this.setState({ showModal: false });   
      }

      render() {
         return (
           <View style={{ flex: 1 }}> 
              <Button
                 onPress={() => this.setState({ showModal: !this.state.showModal })}
                 backgroundColor={'#81A3A7'}
                 containerViewStyle={{ width: '100%', marginLeft: 0 }}
                 icon={{ name: 'search', type: 'font-awesome' }}
                 title='Open the confirm' 
               />

               <Confirm
                 visible={this.state.showModal}
                 onDecline={this.onDecline.bind(this)}
                >
                </Confirm>      
            </View>
         );
      }
}

export default MainActivity;

Confirm.js:

import React from 'react';
import { Text, View, Modal } from 'react-native';
import { DropDownMenu } from '@shoutem/ui';
import TestConfirm from './TestConfirm';
import { CardSection } from './CardSection';
import { Button } from './Button';
import { ConfirmButton } from './ConfirmButton';

const Confirm = ({ children, visible, onAccept, onDecline }) => {

  const { containerStyle, textStyle, cardSectionStyle } = styles;

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={() => {}}
    >
      <View style={containerStyle}>
        <CardSection style={cardSectionStyle}>
          {/* Here is my DropDownMenu */}
          <TestConfirm />
        </CardSection>

        <CardSection>
          <ConfirmButton onPress={onAccept}>Yes</ConfirmButton>
          <ConfirmButton onPress={onDecline}>No</ConfirmButton>
        </CardSection>
      </View>
    </Modal>
  );
};

const styles = {
  cardSectionStyle: {
    justifyContent: 'center'
  },
  textStyle: {
    flex: 1,
    fontSize: 18,
    textAlign: 'center',
    lineHeight: 40
  },
  containerStyle: {
    backgroundColor: 'rgba(0, 0, 0, 0.75)',
    position: 'relative',
    flex: 1,
    justifyContent: 'center'
  },
  buttonStyle: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#fff',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#007aff',
    marginLeft: 5,
    marginRight: 5
  }
};

export { Confirm };

TestConfirm.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { DropDownMenu, Title, Image, Text, Screen, NavigationBar } from '@shoutem/ui';
import { 
  northCities,
  centralCities,
  southCities,
  eastCities,
  islandCities
} from './CityArray';

class TestConfirm extends Component {

    constructor(props) {
        super(props);
        this.state = {
          zone: [
            {
              id: 0,
              brand: "North",
              children: northCities
              },
            {
              id: 1,
              brand: "Central",
              children: centralCities
            },
            {
              id: 2,
              brand: "South",
              children: southCities
            },
            {
              id: 3,
              brand: "East",
              children: eastCities
            },
            {
              id: 4,
              brand: "Island",
              children: islandCities
            },
          ],
        }
      }

  render() {
    const { zone, selectedZone, selectedCity } = this.state

    return (
      <Screen>
        <DropDownMenu
            style={{
              selectedOption: {
                marginBottom: -5
              }
            }}
            styleName="horizontal"
            options={zone}
            selectedOption={selectedZone || zone[0]}
            onOptionSelected={(zone) => 
                this.setState({ selectedZone: zone, selectedCity: zone.children[0] })}
            titleProperty="brand"
            valueProperty="cars.model"
        />
       <DropDownMenu
            style={{
              selectedOption: {
                marginBottom: -5
              }
            }}
            styleName="horizontal"
            options={selectedZone ? selectedZone.children : zone[0].children} // check if zone selected or set the defaul zone children
            selectedOption={selectedCity || zone[0].children[0]} // set the selected city or default zone city children
            onOptionSelected={(city) => this.setState({ selectedCity: city })} // set the city on change
            titleProperty="cnCity"
            valueProperty="cars.model"
        />
      </Screen>
    );
  }
}

export default TestConfirm;

If i console.log DropDownMenu onOptionSelected value like the city it would be

{cnCity: "宜蘭", enCity: "Ilan", id: 6}

I want to get the enCity from MainActivity.js

ConfirmButton.js:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const ConfirmButton = ({ onPress, children }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyle}>
      <Text style={textStyle}>
        {children}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
  { ... }
};

export { ConfirmButton };

Answer 1

You can pass a function to related component via props and run that function with the required argument you got from the dropdowns. Because you have couple of components in a tree it is going to be a little hard to follow but if you get the idea I'm sure you'll make it simpler. Also after getting comfortable with this sort of behavior and react style coding you can upgrade your project to some sort of global state management like redux, flux or mobx.

Sample (removed unrelated parts)

class MainActivity extends Component {
  onChangeValues = (values) => {
    // do some stuf with the values
    // value going to have 2 properties
    // { type: string, value: object }
    const { type, value } = values;
    if(type === 'zone') {
      // do something with the zone object
    } else if(type === 'city') {
      // do something with the city object
    }

  }
  render() {
    return(
      <Confirm onChangeValues={this.onChangeValues} />
    )
  }
}

---

const Confirm = ({ children, visible, onAccept, onDecline, onChangeValues }) => {
  return(
    <TestConfirm onChangeValues={onChangeValues} />
  )
}

---

class TestConfirm extends Component {
  render() {
    return(
      <Screen>
        <DropDownMenu
          onOptionSelected={(zone) => {
            // run passed prop with the value
            this.props.onChangeValues({type: 'zone', value: zone});
            this.setState({ selectedZone: zone, selectedCity: zone.children[0] });
          }}              
        />
        <DropDownMenu 
          onOptionSelected={(city) => {
            // run passed prop with the value
            this.props.onChangeValues({type: 'city', value: city});
            this.setState({ selectedCity: city })
          }}              
        />
      </Screen>
    )
  }
}