How to use 'filter' in a flatlist (json API)

Question

The api has the date as follows:

"period": "2019-10-19T00:00:00.000-03:00",

Pull my flatList like this:

componentDidMount() {
        console.log(this.props.navigation)
        this.loadData();
    }
    async loadData() {
        try {
            let response = await axios.get(SERVERNEW + '/activities.json');            
            this.setState({ progr: response.data, loading: false });            
            console.log(response)            
        } catch (error) {
            alert('Não foi possivel carregar os eventos');
            this.setState({ loading: false });
        }
    }

And I address it as follows:

render(){
        return this.state.loading ? (
            <View>
                <Spinner visible={true} textContent={'Carregando...'} />
            </View>
        ) : (
            <View style={style.programming.container}>
            <ScrollView>
                <View style={{marginTop: 20, marginLeft: 25}}>
                    <Text style={{fontSize: 20, fontWeight: 'bold', color: '#22abc6'}}>PROGRAMAÇÃO</Text>
                </View>
            <FlatList
                style={{backgroundColor: 'white', marginTop: 10}}
                data={this.state.progr}
                renderItem={({item}) => this.renderItem({item})}
                keyExtractor = {(item, index) => item.id.toString()}
            />
            </ScrollView>

The dates of the event are 16, 17, 18 e 19... How do I render display first those of day 16, dps 17 and so on... I think I have to use the filter, but I’m not getting the syntax right. Thank you

Answer 1

Follow this example adapting your received object that will give right:

let listaRecebida = [
	{"period": "2019-10-19T00:00:00.000-03:00"},
	{"period": "2019-10-11T00:00:00.000-03:00"},
	{"period": "2019-10-16T00:00:00.000-03:00"},
	{"period": "2019-10-13T00:00:00.000-03:00"},
	{"period": "2019-10-27T00:00:00.000-03:00"},
	{"period": "2019-10-19T00:00:00.000-03:00"},
];

listaOrdenada = listaRecebida.sort(
	function(a, b){
  	const varA = Date.parse(a.period);
  	const varB = Date.parse(b.period);
  	return varA-varB;
  }
)

console.log('Lista ordenada');
listaOrdenada.forEach(item => {
  console.log(item.period);
});

Answer 2

I was able to adapt it as follows:

<FlatList
                style={{backgroundColor: 'white', marginTop: 10}}
                data={this.state.progr.data.filter(x => x.period === '2019-10-17T00:00:00.000-03:00')}
                renderItem={({item}) => this.renderItem({item})}
                keyExtractor = {(item, index) => item.id.toString()}
            />

---