How to access a Wrapped Component state from HOC

Question

I'm building this HOC Modal.

When I press the Button "Aplicar" (TouchableItem:onPress), that is on the Modal, I need to access the WrappedComponent state.

is there any way to do this?

import React, { Component, PropTypes } from 'react';
import { View, Text } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

import TouchableItem from '../TouchableItem';
import ModalHOC from '../Modal';
import styles from './styles';

const ModalFiltroHOC = () => (WrappedComponent) => {
  @ModalHOC()
  class ModalFiltro extends Component {
    static propTypes = {
      onClose: PropTypes.func.isRequired,
      onSuccess: PropTypes.func.isRequired,
      successText: PropTypes.string.isRequired,
      title: PropTypes.string.isRequired,
    }

    render() {
      return (
        <View style={{ flex: 1, backgroundColor: 'white' }}>
          <View style={styles.modalFiltroHeader}>
            <View style={{ flex: 0.15 }}></View>
            <View style={styles.modalFiltroHeaderTitle}>
              <Text style={styles.modalFiltroHeaderTitleText}>
                {this.props.title}
              </Text>
            </View>
            <View style={styles.modalFiltroHeaderIconContainer}>
              <TouchableItem
                style={{ marginRight: 10 }}
                onPress={this.props.onClose}
                pressColor={'white'}
                delayPressIn={0}
                borderless
              >
                <MaterialIcons
                  color={'white'}
                  name="close"
                  size={22}
                />
              </TouchableItem>
            </View>
          </View>
          <View style={styles.modalFiltroContent}>
            <WrappedComponent {...this.props} />
          </View>
          <TouchableItem
            onPress={this.props.onSuccess} {/* <-- HERE */}
            pressColor={'white'}
            style={styles.modalFiltroSuccessContainer}
          >
            <View pointerEvents="box-only" style={styles.modalFiltroSucccess}>
              <MaterialIcons
                color={'white'}
                name="check"
                size={22}
              />
              <Text style={styles.modalFiltroSucccessText}>
                {this.props.successText}
              </Text>
            </View>
          </TouchableItem>
        </View>
      );
    }
  }

  return ModalFiltro;
};

export default ModalFiltroHOC;

Notes:

ModalHOC is a simple React Native Modal.

Thanks in advance!

Answer 1

I solved this using Inheritance Inversion You can read more about it in this post

The code now looks like this:

import React, { Component, PropTypes } from 'react';
import { View, Text } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

import TouchableItem from '../TouchableItem';
import ModalHOC from '../Modal';
import styles from './styles';

const ModalFiltroHOC = () => (WrappedComponent) => {
  @ModalHOC()
  class ModalFiltro extends WrappedComponent { {/* <--- */}
    handleSuccess = () => {
      console.log(this.state);
    }

    render() {
      return (
        <View style={{ flex: 1, backgroundColor: 'white' }}>
          <View style={styles.modalFiltroHeader}>
            <View style={{ flex: 0.15 }}></View>
            <View style={styles.modalFiltroHeaderTitle}>
              <Text style={styles.modalFiltroHeaderTitleText}>
                {this.props.title}
              </Text>
            </View>
            <View style={styles.modalFiltroHeaderIconContainer}>
              <TouchableItem
                style={{ marginRight: 10 }}
                onPress={this.props.onClose}
                pressColor={'white'}
                delayPressIn={0}
                borderless
              >
                <MaterialIcons
                  color={'white'}
                  name="close"
                  size={22}
                />
              </TouchableItem>
            </View>
          </View>
          <View style={styles.modalFiltroContent}>
            {super.render()} {/* <--- */}
          </View>
          <TouchableItem
            onPress={this.handleSuccess}
            pressColor={'white'}
            style={styles.modalFiltroSuccessContainer}
          >
            <View pointerEvents="box-only" style={styles.modalFiltroSucccess}>
              <MaterialIcons
                color={'white'}
                name="check"
                size={22}
              />
              <Text style={styles.modalFiltroSucccessText}>
                {this.props.successText}
              </Text>
            </View>
          </TouchableItem>
        </View>
      );
    }
  }

  return ModalFiltro;
};

export default ModalFiltroHOC;