How to access array value in react?

Question

I have an array categoryDataString

[{"ID":"1","Category":"first"},
{"ID":"2","Category":"second"},
{"ID":"3","Category":"third"}]

I want to access the specific value from the array. like the name of the 2nd category.

I tried 1st

 console.log(categoryDataString[0].ID)

result

undefined

2nd

console.log(categoryDataString)

result

[{"ID":"1","Category":"first"},{"ID":"2","Category":"second"},{"ID":"3","Category":"third"}]

This is my code

 const categoryDataString = JSON.stringify(categoryData)
    const categoryData = useCategoryData()
    useEffect(() => {
            setDataLoad(DataLoaded + 1)
            setSelected(categoryDataString.Category)
            console.log(categoryDataString[0].ID)
            console.log(categoryDataString)
        }, [categoryData])

This is my Itemdata.js

import React, { useState, useEffect } from 'react'
import { View, Text, StyleSheet } from 'react-native'

export const useCategoryData = (props) => {
    const [Category, setCategory] = useState('')
    useEffect(() => {
        fetch('https://www.amrutras.com/Category.php')
            .then((response) => response.json())
            .then((responseJson) => {
                {
                    setCategory(responseJson)

                    // responseJson.map((item) => Alert.alert(item.Name))
                }

                // Showing response message coming from server after inserting records.
            })
            .catch((error) => {
                console.error(error)
            })
    }, [])

    return Category
}

export default useCategoryData

You can access the array by its variable name.

Hassan Imam
– Hassan Imam

2021-03-13 11:49:25 +00:00
Commented Mar 13, 2021 at 11:49 — Hassan Imam
– Hassan Imam, Commented Mar 13, 2021 at 11:49
Is the array filled after asynchronous call?

Boussadjra Brahim
– Boussadjra Brahim

2021-03-13 11:51:08 +00:00
Commented Mar 13, 2021 at 11:51 — Boussadjra Brahim
– Boussadjra Brahim, Commented Mar 13, 2021 at 11:51
yes. I am setting this array from response of fetch.

sanket kheni
– sanket kheni

2021-03-13 11:52:00 +00:00
Commented Mar 13, 2021 at 11:52 — sanket kheni
– sanket kheni, Commented Mar 13, 2021 at 11:52
please share the whole code

Boussadjra Brahim
– Boussadjra Brahim

2021-03-13 11:52:41 +00:00
Commented Mar 13, 2021 at 11:52 — Boussadjra Brahim
– Boussadjra Brahim, Commented Mar 13, 2021 at 11:52

jeremy302 · Accepted Answer · 2021-03-13 11:59:32Z

2

I think you get undefined because categoryDataString is well, a string. so you would need to converty it to an object then access the properties as such:

const categoryDataObject = JSON.parse(categoryDataString);
console.log(categoryDataObject[0].ID)

you could also try accessing the categoryData without needing to convert it to a json string in the first place, so:

console.log(categoryData[0].ID)

answered Mar 13, 2021 at 11:59

jeremy302

8388 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access array value in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related