Change CollapseHeader text if isCollapse is True

[Base29]

Hello Guys ... I want to change the text within the when toggled .. here is my code

<Collapse
                        onToggle={(isCollapsed) => {
                            console.log(isCollapsed);
                            if (isCollapsed) {
                                this.setState({collapseHeaderText: 'Hide Order Detail'})
                            }
                        }}>
                    >
                        <CollapseHeader>
                            <View>
                                <Text style={myOrdersStyles.orderItemDetailsHeaderText}>{this.state.collapseHeaderText}</Text>
                            </View>
                        </CollapseHeader>
                        <CollapseBody>
                            {this.renderOrderItemDetails(orders)}
                        </CollapseBody>
                    </Collapse>

there is a state collapseHeaderText with a default value 'View Order Detail"

[marouanekadiri]

Hi @Base29 ,
Can you describe what happens when you use this code?

[Base29]

My goal was to change the text within the when the toggled ... When toggled the isCollapse turn to true ... I have a state that holds the initial text for 'View Order Detail' and when isCollapse is = true then it should change to 'Hide Order Detail' ... I want to know is there a function which change

[Base29]

here is the code in paste bin ... https://pastebin.com/hkrXyHi3 the above mentioned code is on line 369

[Base29]

So any way to change the when isCollapse = true ?

[marouanekadiri]

You need only to manage the Collapse state yourself by providing its current state ( toggled or not)

<Collapse
    isCollapsed={this.state.toggled}
    onToggle={(isCollapsed) => {
        console.log(isCollapsed);
        if (isCollapsed) {
            this.setState({collapseHeaderText: 'Hide Order Detail', toggled: true})
        } else  {
            this.setState({toggled: false});
        }
    }}>
    >
    <CollapseHeader>
        <View>
            <Text style={myOrdersStyles.orderItemDetailsHeaderText}>{this.state.collapseHeaderText}</Text>
        </View>
    </CollapseHeader>
    <CollapseBody>
        {this.renderOrderItemDetails(orders)}
    </CollapseBody>
</Collapse>