How to fetch data automatically every minute in React?

A way to do this is using this approach:

import React, { Component } from 'react';

class Test3 extends Component{
    state = {
        loading: true,
        coordinates: null,
    }
    intervalId = null;

    fetchData = async () => {
     const url = "https://ttr.vsbbn.nl:4000/gps_history?team_id=10";
        const response = await fetch(url);
        const data = await response.json();

        this.setState({coordinates: data, loading: false });
    }

    async componentDidMount(){
     await this.fetchData();

     this.intervalId = setInterval(() => {
        this.fetchData();
     }, 1000 * 60)
    }

    componentWillUnmount() {
      clearInterval(this.intervalId)
    }

    render(){
        const { loading, coordinates } = this.state
        return(
            <div>
                {loading || !coordinates ? (
                    <div>loading...</div>
                ) : (
                    <div>
                        {coordinates.map((coordinate, index) => {
                             return (
                               <div key={index}>
                                    <p>Longitute: {coordinate.lon}</p>
                                    <p>Latitude: {coordinate.lat}</p>
                                    <p>Time: {coordinate.timestamp}</p>
                                    <p>...............</p>
                               </div> 
                             )
                         })}
                    </div>
                )}
            </div>
        )
    }
}

export default Test3;

The other answers work, but use Class-based components. This approach uses React Hooks.

Here's the example https://codesandbox.io/s/distracted-pond-g81ty

import React, { useState, useEffect, useRef } from "react";

// Dan's useInterval hook https://overreacted.io/making-setinterval-declarative-with-react-hooks/
function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

function Request() {
  let [requestCount, setRequestCount] = useState(0);

  // Run every second
  const delay = 1000;

  useInterval(() => {
    // Make the request here
    setRequestCount(requestCount + 1);
  }, delay);

  return <h1>{requestCount}</h1>;
}

You can use setInterval like this for specific time if you are having different values/data on api call.

    async componentDidMount(){
       setInterval(()=>{
       const url = "https://ttr.vsbbn.nl:4000/gps_history?team_id=10";
        const response = await fetch(url);
        const data = await response.json();

        this.setState({coordinates: data, loading: false });
       },3000)
    }