How to fetch data from API in React-Native?

Question

I need some help for fetching data from API with GET request. I'm stuck only to display the data in the console but I don't know how to make it display on the device. Can someone help me please?

That's my code:

class HomeScreen extends React.Component {
constructor(props) {
    super(props);
    this.state = {
     currentDate: new Date(),
     markedDate: moment(new Date()).format("YYYY-MM-DD"),
     isLoading: true,
     data: ''
    };
}


componentDidMount() {
     fetch("https://URL/api/schedule?filters[employee_id]=6", {method: "GET"})
    .then((response) => response.json())
    .then((responseJson) => {
       this.setState({...this.state, isLoading:false, data:responseJSON}); //set the state with data 
    })
    .catch((error) => {
         console.error(error);
    });
}

render() {
    const today = this.state.currentDate;
    const month = moment(today).format("MMMM");
    const date = moment(today).format("D")
    const day = moment(today).format("dddd");

    const data = this.state;

    return (... 

<FlatList 
                data={this.state.data}
                renderItem={({item,index})=>
                         (
                         <Text>{item.id}</Text>
                    )
                 }
                }
                 keyExtractor={(item)=>item.id.toString()}
            />

)

And I wish to know then how to use it something like "{data.id}" (if I'm not wrong)

Here is little part of my .json :

"data": [
        {
            "id": 114,
            "employee_id": 6,
            "room_id": 17,
            "type_of_cleaning": "D",
            "date": "2020-10-05"
        }, ...

Answer 1

You should save the data come into state then loop on it even using map() or Flatlist component

  this.state = {
        ....
        data: []
    };

componentDidMount() {
         fetch("https://URL/api/schedule?filters[employee_id]=6", {method: "GET"})
        .then((response) => response.json())
        .then((responseJson) => {
           this.setState({data: responseJson});
           console.log(responseJson);
        })
        .catch((error) => {
            console.error(error);
        });
    }


Ui

<FlatList 
    data={this.state.data}
    renderItem={({item,index})=>
             (
             <Text>{item.id}</Text>
        )
     }
     keyExtractor={(item)=>item.id.toString()}
/>

Answer 2

I think something along the line of:

 constructor(props) {
        super(props);
        this.state = {
         currentDate: new Date(),
         markedDate: moment(new Date()).format("YYYY-MM-DD"),
         isLoading: true,
         data: [] //should be an array
        };
    }


    componentDidMount() {
         fetch("https://URL/api/schedule?filters[employee_id]=6", {method: "GET"})
        .then((response) => response.json())
        .then((responseJson) => {
           this.setState({...this.state, isLoading:false, data:responseJSON}); //set the state with data 
        })
        .catch((error) => {
             console.error(error);
        });
    }

    render() {
        const today = this.state.currentDate;
        const month = moment(today).format("MMMM");
        const date = moment(today).format("D")
        const day = moment(today).format("dddd");

        const data = this.state.data; //amd you are good from here
   }

You just need to setState and you should be fine. To make your life easier I would be remised if I did not mention MOBX and Redux might make your life easier