Collapsed component cant open or close

[adhityairvan]

i'm creating some collapsible content, i created each content its own state but when i change it, nothing change on the collapsible. i checked the state and it changed just find

this is my render function ( i use flatlist on this function)

` renderAccordion = ({item,index}) =>{

    header = (

        <View style={styles.headerContainer}>

          <Text style={styles.headerText}>{item.header}</Text>

        </View>

    );

    return(

        <View key={index}>

            <TouchableHighlight

                onPress={() =>{this.toggleCollapse(item.key)}}

            >

                {header}

            </TouchableHighlight>

            <Collapsible collapsed={this.state[item.key]}>

                    {item.content}

            </Collapsible>

            {/* {content} */}

        </View>

    )

}

this is my function to change state

toggleCollapse = (key) =>{

    console.log(this.state[key].toString());

    newState = !this.state[key];

    console.log(newState);

    console.log(key);

    this.setState({ [key] : newState },function () {

        console.log(this.state[key]);

    });

}

`

and this is my state constructor(props){ super(props); this.state={ description: '', location:'', openHour:'', tiketPrice:'', } }

[iRoachie]

Can you create an example on https://snack.expo.io that reproduces this?