Can't access JSON data and print Begin and End only React Native - json

Question

I'm trying to access to Begin and End inside JSON data but I can't. It just accesses and prints JSON data.
How can I print the Begin and End in separately FlatList?
Here is my code :
manage = date => {
this.setState({status: true})
this.setState({date:date})
const office_id=this.state.office_id;
const duration=this.state.duration;
const url='http://MyIP/api/timeApi';
axios.post(url,{office_id,date,duration})
.then(resp => this.setState({
testArray : JSON.stringify(resp.data),
}))
.catch(e)
{
alert(e);
}}
testFunction = () => {
var x = this.state.testArray;
return(
<Text>{x}</Text>
)
}
<DatePicker
date={this.state.date}
onDateChange={this.manage.bind(this) } />
in return
{
this.state.status ? <View>
<FlatList
data={this.state.testArray}
renderItem={this.testFunction}
/>
</View> : null
}
and here is my result

Answer 1

you need something like this , try to change it based on your code
import React, { Component } from 'react';
import {Text, View, FlatList ,Button} from 'react-native';
export default class Test extends Component {
constructor() {
super();
this.state = {
data: ['one', 'two', 'three', 'four', 'five'],
}
}
_keyExtractor = (item, index) => index.toString();
_renderItem = ({ item }) => (
<View>
<Text>{item}</Text>
</View>
);
manage = () => {
var x = this.firstAndLast(this.state.data);
this.setState({
data : x
})
}
firstAndLast(myArray) {
var firstItem = myArray[0];
var lastItem = myArray[myArray.length-1];
var newArray = [];
newArray.push(firstItem);
newArray.push(lastItem);
return newArray;
}
render() {
return (
<View>
<FlatList
data={this.state.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
<Button title="click" onPress={() => this.manage()} />
</View>
);
}
}