Rendering a Table Axios ReactJS-CodePudding

i'm trying to render all booked slots using a table, i suspect the problem is with the Axios call since i get "Cannot GET /api/get/week1" but i'm not sure how to test this theory or how check if the array actually contains any values, any help would be greatly appreciated!

function BookingTable() {

   

    useEffect(() => {
    Axios.get('http://localhost:3001/api/get/week1').then((response) => {
        setIsBooked(response.data)
       
        console.log(response.data);
    })
  }, []);

  const [isBooked, setIsBooked] = useState([])

  const renderTableData = () => {
    return isBooked.map((val) => (
      <tr class>
        <td>{val.booked}</td>
      </tr>))
  }

    return (
        <table id="table">
          <thead>
            <tr>
              <th>Booked</th>
           
            </tr>
          </thead>
          <tbody>
              {renderTableData}
          </tbody>
        </table>
      )

}

export default BookingTable

CodePudding user response：

you call function incorrectly call it like renderTableData() working demo link

import axios from "axios";
import { useEffect, useState } from "react";
import "./styles.css";

function BookingTable() {
  const [isBooked, setIsBooked] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts").then((response) => {
      setIsBooked(response.data);
    });
  }, []);

  const renderTableData = () => {
    return isBooked?.map((val) => (
      <tr class>
        <td>{val.id}</td>
      </tr>
    ));
  };

  return (
    <table id="table">
      <thead>
        <tr>
          <th>Booked</th>
        </tr>
      </thead>
      <tbody>{renderTableData()}</tbody>
    </table>
  );
}

export default BookingTable;