step1

App.js

import logo from './logo.svg';
import './App.css';
import axios from "axios";
import DisplayTask from "./components/DisplayTask";
import {useState} from "react";
import {useEffect} from "react";

function App() {
    useEffect(() => {
        axios.get('https://localhost:8000/api/tasks/3')
            .then((response) => response.data)
            .then((data) => {
                setTask(data);
            });
    }, [])
    const getTask = () => {
        axios.get('https://localhost:8000/api/tasks/4')
            .then((response) => response.data)
            .then((data) => {
                setTask(data);
            });
    }
    const [task, setTask] = useState(null);
  return (
    <>
      <h1>Task</h1>
      <DisplayTask task={task} />
        <button onClick={getTask}>OK</button>
    </>
  );
}

export default App;