Cara display spesifik data di reactjs

Halo , mau tanya bagaimana cara untuk display spesifik data ? contohnya dalam json ada "attributes" yang memiliki beberapa bagian seperti "id", "name", "info"

"meta": {
        "totalItems": 20,
        "currentPage": 1,
        "itemPerPage": 6,
        "totalPages": 4
    },
    "data": [
        {
            "id": "1",
            "type": "gift",
            "attributes": {
                "id": 1,
                "name": "Xiaomi Mi A2 Lite",
                "info": "<p>The Mi A2 Lite is not your regular budget smartphone - it has a high-res notched screen with slim bezels, a dual-camera on its back, a very large battery, and runs on the latest vanilla Android OS. The notched screen is probably the highlight feature of the Mi A2 Lite and while controversial, it still adds for some modern looks.</p>",
                "description": "<p>\nBody: Aluminum body, plastic antenna strips at the back.<br />\nDisplay: 5.84\" IPS LCD with a cutout, 1,080x2,280px resolution, 19:9 aspect ratio, 432ppi.<br />\nRear camera: Primary 12MP, 1.25ยตm pixel size, f/2.2 aperture, PDAF; Secondary 5MP, 1.12ยตm pixel size, f/2.2 aperture - serving as depth sensor; [email protected] video with EIS.<br />\nFront camera: 5MP, Auto HDR; 1080p/30fps video recording.<br />\nOS: Android 8.1 Oreo (Android One)<br />\nChipset: Qualcomm Snapdragon 625: octa-core 2.0GHz Cortex-A53 CPU, Adreno 506 GPU.<br />\nMemory: 3/3GB of RAM; 32/64 storage; microSD slot.<br />\nBattery: 4,000mAh Li-Po (sealed);<br />\nConnectivity: Dual-SIM; LTE, microUSB; Wi-Fi a/b/g/n; GPS; Bluetooth 4.2, IR blaster.<br />\nMisc: Rear-mounted fingerprint reader; single down-firing speaker; 3.5mm jack.\n</p>",
                "points": 500000,
                "slug": "xiaomi-mi-a2-lite",
                "stock": 49,
                "images": [
                    "https://rgbtest.s3.ap-southeast-1.amazonaws.com/images/gift/full/xiaomi-mi-a2-lite.jpg"
                ],
                "isNew": 0,
                "rating": 4.05,
                "numOfReviews": 17,
                "isWishlist": 0
            }
        },


saya udah nyoba display data dengan tipe seperti ini dan bisa,
{
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },

berikut code fetch dan display yang belum bisa ke display, ada error
"Uncaught TypeError: Cannot read properties of undefined (reading 'name')"
"Uncaught TypeError: Cannot read properties of undefined (reading 'info')"

class App extends Component {
        state = {
            post: []
        }
    

    componentDidMount() {
        fetch("https://recruitment.dev.rollingglory.com/api/v2/gifts?page[number]=1&page[size]=6")
        .then(response => response.json())
        .then(json => {
            this.setState({ post: [json] })
        })
        }

    render() {
        return (
         <div>
            <p className="section-title">Blog Post</p>
                  {
                      this.state.post.map(post => {
                       return <Post key={post.id} name={post.attributes.name} info={post.attributes.info}/>
                      }) 
                  }       
         </div>

        )
    }
}

export default App;

avatar DreamCatcher

@DreamCatcher

4 Kontribusi 0 Poin

  • seperti apa? - @hilmanski
  • udah nyoba pakai useState, dan useEffect, kenadalanya belum bisa nge-display.. - @DreamCatcher
  • console isi this.state.post nya apa? tipe nya apa (pakai typeof) - @hilmanski

Tampikan semua |


Jawaban

Belum ada Jawaban, jadi yang pertama

Login untuk gabung berdiskusi