How to distinguishes between different parent classes in React Native

Question

Say I have this wrapper component:

export class WrapperComponent extends React.Component {

    constructor(props) {
        super(props);

        this.opacity = 1
        this.editable = true
        this.placeholder = ''

        this.state = {
            text: ''
        }
    }

    makeInvisible() {
        this.opacity = 0
        this.editable = false
    }
    makeVisible() {
        this.opacity = 1
        this.editable = true
    }

    setPlaceHolder(placeHolder) {
        this.placeHolder = placeholder
    }

    getText() {
        return this.state.text
    }

    render() {
        return (
            <View style = {styles.horizontalView}>
                {this.props.children}
                <TextInput
                    placeholder = "day"
                    style={styles.textInput}
                    opacity = {this.opacity}
                    editable = {this.editable}

                    onChangeText = {(text) => {
                        this.setState({text: text })

                    }}
                />
            </View>
        )
    }
}

And I have another class that uses the this WrapperComponent class like so:

export class ClassUsingWrapperComponent extends React.Component {

    this.wrapper = new WrapperComponent()
    this.wrapper.makeInvisible()
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <WrapperComponent>

            </WrapperComponent>

            <WrapperComponent>

            </WrapperComponent>

            <WrapperComponent>

            </WrapperComponent>


        )
    }
}

I have three WrapperComponents here but I just want to make one invisible while keeping the others visible. How would I distinguish which WrapperComponent gets invisible?

Thank you so much for your help.

Mariano Miani · Accepted Answer · 2018-09-23T23:59:50.377

opacity and editable should be props of your WrapperComponent, you can just have a visible prop and render multiple wrappers in this way:

 render() {
     return (
         <WrapperComponent visible />
         <WrapperComponent visible={false} />
     )
 }

and then in you WrapperComponent:

render() {
    return (
        <View style = {styles.horizontalView}>
            {this.props.children}
            <TextInput
                placeholder = "day"
                style={styles.textInput}
                opacity = {this.props.visible? 1 : 0}
                editable = {this.props.visible}

                onChangeText = {(text) => {
                    this.setState({text: text })

                }}
            />
        </View>
    )
}

you should then remove the makeInvisible and makeVisible methods

You can have a look to the React Native props docs if you have any doubt

Thank you so much for your help. – aejhyun Sep 24 '18 at 18:33 — aejhyun, Sep 24 '18 at 18:33

How to distinguishes between different parent classes in React Native

1 Answers1