如何在 React Native 中隐藏 Accordion 特定内容

Question

In this example, I want to show and hide feature for the content of accordion. This is my source code.

state = {
    check: true,
};

 renderContent = (order, _, isActive) => {
    //Accordion Content   
    return (
         <View style={styles.child}>
                   <View>
                     <Text>Hello World</Text>
                   </View>

                   <View>
                     <Text>Goodbye</Text>
                   </View>
                }
         </View>
        )
}

render() {
    return (
        <View style={styles.scrollMain}>
                <CheckBox
                    value = { this.state.check}
                    onValueChange={(newValue) => this.setState({check:newValue})}/> // this is my checkbox
                <Accordion
                    .....
                    renderContent={this.renderContent}
                    }/> 
            }
        </View>
    );

What I want to do is if I click to checkbox, it should hide this content below

                `<View>
                  <Text>Goodbye</Text>
                </View>`

When I uncheck checkbox it should go back. Give me please idea how I can do it?

Answer 1

Hi you almost have it done, you just have to think the this.state.check condition is the one that will handle the content so you have several options to achieve this:

• You can create another component to handle this logic.
• Instead use a JSX block to handle this logic.
• Or you can use css with a class or something similar to just hide the content but the elements will always exist.

I think that this decision invovles your use case but a straightforward way to do it is encapsulating the logic in a JSX block

renderContent = (order, _, isActive) => {
    //Accordion Content   
    return (
         <View style={styles.child}>
                   <View>
                     <Text>Hello World</Text>
                   </View>

                   {
                    !this.state.check?
                     <View>
                      <Text>Goodbye</Text>
                     </View> 
                    : null
                   }
                }
         </View>
        )
}

Answer 2

Try this condition, if you want other behaviors just tell me

     renderContent = (order, _, isActive) => {
    //Accordion Content   
    return (
         <View style={styles.child}>
                   <View>
                     <Text>Hello World</Text>
                   </View>

                {!this.state.check &&
                   <View>
                     <Text>Goodbye</Text>
                   </View>}
                }
         </View>
        )
}