my table and DataTableFetcher

import React, { useEffect, useState } from 'react';

const MyTable = ({ intradata }) => {
  const [data, setData] = useState(null);
  const [selectedGroup, setSelectedGroup] = useState('summary');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://5.34.198.87:8000/api/options/intradatacols');

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
          throw new Error('Invalid content type. Expected JSON.');
        }

        const jsonData = await response.json();
        console.log('API Response for intradatacols:', jsonData);
        setData(jsonData);

        const validGroups = Object.keys(jsonData.groups);
        const initialColumns = jsonData.groupscolumn[selectedGroup] || [];
        setColumns(initialColumns);

        if (!validGroups.includes(selectedGroup)) {
          console.error(`Invalid selectedGroup: ${selectedGroup}`);
          return;
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        setError(error.message || 'An error occurred while fetching data.');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [selectedGroup]);

  useEffect(() => {
    console.log('intradata:', intradata);
    console.log('columns:', columns);
    console.log('data:', data);
  }, [intradata, columns, data]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!data || !data.groups || !data.groupscolumn) {
    return <div>No data available</div>;
  }

  const validGroups = Object.keys(data.groups);

  if (!validGroups.includes(selectedGroup)) {
    console.error(`Invalid selectedGroup: ${selectedGroup}`);
    return <div>No data available</div>;
  }

  return (
    <div className="container mt-4">
      <div className="btn-group mb-3">
        {validGroups.map((groupKey) => (
          <button
            key={groupKey}
            type="button"
            className={`btn ${selectedGroup === groupKey ? 'btn-primary' : 'btn-secondary'}`}
            onClick={() => setSelectedGroup(groupKey)}
          >
            {data.groups[groupKey]}
          </button>
        ))}
      </div>

      <div className="table-container" style={{ overflowY: 'auto', maxHeight: '500px' }}>
        <table className="table table-bordered table-striped">
          <thead className="thead-dark">
            <tr>
              {columns.map((column, index) => (
                <th key={index}>{data.fields[column]}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {intradata && Array.isArray(intradata) ? (
              intradata.map((item, itemIndex) => (
                <tr key={itemIndex}>
                  {columns.map((column, columnIndex) => (
                    <td key={columnIndex}>{item[column]}</td>
                  ))}
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={columns.length}>{intradata === null ? 'Loading...' : 'No data available'}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default MyTable;




import React, { useEffect, useState } from 'react';
import MyTable from './MyTable';

const DataTableFetcher = () => {
  const [intradata, setIntradata] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://5.34.198.87:8000/api/options/intradata');

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
          throw new Error('Invalid content type. Expected JSON.');
        }

        const jsonData = await response.json();
        console.log('API Response:', jsonData);
        setIntradata(jsonData.data);
      } catch (error) {
        console.error('Error fetching intradata:', error);
        setError(error.message || 'An error occurred while fetching intradata.');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return <MyTable intradata={intradata} />;
};

export default DataTableFetcher;