JSFiddle - React, Tailwind, and code Playground

HTML

{
"1": {
"id": "1",
"adi": "Kırıcı Delici ve Matkap Modelleri",
"alt_kat_id": "0",
"foto": null,
"alt_kategoriler": [
{
"id": "2",
"adi": "Kırıcılar ve Deliciler",
"alt_kat_id": "1",
"foto": null
},
{
"id": "3",
"adi": "Akülü Vidalamalar",
"alt_kat_id": "1",
"foto": null
},
{
"id": "4",
"adi": "Matkaplar",
"alt_kat_id": "1",
"foto": null
}
]
},
"5": {
"id": "5",
"adi": "Testere Modelleri",
"alt_kat_id": "0",
"foto": null,
"alt_kategoriler": [
{
"id": "6",
"adi": "Testereler",
"alt_kat_id": "5",
"foto": null
},
{
"id": "7",
"adi": "Tezgah Tipi Testereler",
"alt_kat_id": "5",
"foto": null
},
{
"id": "8",
"adi": "Motorlu Testere",
"alt_kat_id": "5",
"foto": null
}
]
},
"9": {
"id": "9",
"adi": "Makineler",
"alt_kat_id": "0",
"foto": null,
"alt_kategoriler": [
{
"id": "10",
"adi": "Taşlamalar",
"alt_kat_id": "9",
"foto": null
},
{
"id": "11",
"adi": "Lazer Ölçüm Cihazları",
"alt_kat_id": "9",
"foto": null
},
{
"id": "12",
"adi": "Zımpara ve Polisaj",
"alt_kat_id": "9",
"foto": null
},
{
"id": "13",
"adi": "Freze Makinesi",
"alt_kat_id": "9",
"foto": null
},
{
"id": "14",
"adi": "Kaynak Makineleri",
"alt_kat_id": "9",
"foto": null
},
{
"id": "15",
"adi": "Jeneratörler",
"alt_kat_id": "9",
"foto": null
},
{
"id": "16",
"adi": "Kompresör ve Aksesuarları",
"alt_kat_id": "9",
"foto": null
},
{
"id": "17",
"adi": "Hobi Alet ve Aksesuarları",
"alt_kat_id": "9",
"foto": null
},
{
"id": "18",
"adi": "Basınçlı Yıkama Makine ve Aksesuarları",
"alt_kat_id": "9",
"foto": null
},
{
"id": "19",
"adi": "Çim Biçme Makinesi",
"alt_kat_id": "9",
"foto": null
},
{
"id": "20",
"adi": "Dedektörler",
"alt_kat_id": "9",
"foto": null
},
{
"id": "21",
"adi": "Takım Çanta Ve Dolapları",
"alt_kat_id": "9",
"foto": null
},
{
"id": "22",
"adi": "Boya Tabancası ve Karıştırıcılar",
"alt_kat_id": "9",
"foto": null
}
]
}
}

React

import React, {useEffect,useState} from 'react';
import { Helmet } from 'react-helmet';


const Kategoriler = () => {

    const [kategoriler, setKategoriler] = useState([])

    useEffect (() => {
        const formData = new FormData()
        formData.append('islem', 'kategoriler');
        //formData.append('id', 2);
        fetch(`${process.env.REACT_APP_ENDPOINT}`, {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => setKategoriler(data))
    }, [])
    
    console.log(kategoriler);
    console.log(Array.isArray(kategoriler));
    return (
        <>
        
            <Helmet>
                <title>Kategoriler</title>
            </Helmet>
            <section className="clean-block clean-catalog dark py-3 mt-3">
                <div className="container">
                    <div className="block-heading">

                        <div className="album py-5 bg-light">
                            <div className="container">

                                <div className="row">
                                {Object.values(kategoriler).map((kategori) => (
                                    <div key={kategori.id}>
                                    <h2>{kategori.adi}</h2>
                                    <ul>
                                        {kategori.alt_kategoriler.map((altkategori) => (
                                        <li key={altkategori.id}>{altkategori.adi}</li>
                                        ))}
                                    </ul>
                                    </div>
                                ))}

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
};

export default Kategoriler;